Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
скороход
2 / 2 / 0
Регистрация: 10.12.2017
Сообщений: 34
1

Кнопка, которая при нажатии оставалась "нажатой"

11.07.2018, 11:26. Просмотров 1048. Ответов 7
Метки нет (Все метки)

Хочу сделать css кнопку которая при нажатии оставалась "нажатой" (т.е. active). Искал в интернетах, нашел что это можно сделать с помощью JS (onclick и т.п.). Я пробовал , но не смог.
Кто может помочь или подсказать?
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.07.2018, 11:26
Ответы с готовыми решениями:

Необходимо, чтобы при нажатии на кнопку "Регистрация" Выводилось сообщение: "Точно отправить форму?".
Возник вопрос, у меня есть форма, в которой необходимо заполнить поля и в ней происходит проверка...

При нажатии на кнопку "Всем привет" вывести сообщение `alert("привет")` кнопку удалить и добавить новую кнопку.
как сделать чтобы при нажатие на кнопку всем привет выводилось сообщение alert("привет") кнопка...

При нажатии на кнопку "Сбросить " не запускается функция clear()
При нажатии на кнопку "Сбросить " не запускается функция clear() <!doctype html> <head> ...

Выводит в статусбар код нажатой клавиши, выводит сообщение при нажатии на клавишу "с"
Здравствуйте, код есть, работал, но почему-то??? дал сбой <!DOCTYPE html> <!--html5--> <html>...

Плавное движение блока "А" вправо при нажатии на блок "Б". Реализация на чистом JS
Здравствуйте. Собственно все что необходимо указано в заголовке. Есть блок, который абсолютно...

7
GRO_UA
7 / 7 / 8
Регистрация: 04.07.2018
Сообщений: 69
11.07.2018, 15:13 2
Причем тут html и css?
0
rihnovec93
13 / 8 / 7
Регистрация: 15.04.2015
Сообщений: 37
11.07.2018, 15:16 3
скороход, попробуй этот код:
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
 
    <style>
        .css-button {
            display: inline-block;
            padding: 1em 3em;
            background-color: #0f0;
            cursor: default;
        }
 
        .css-button-pressed {
            display: inline-block;
            padding: 1em 3em;
            background-color: #0f0;
            box-shadow: inset 0 0 20px #000;
        }
    </style>
 
    <body>
        <div class="css-button">
            Click me!
        </div>
    </body>
 
    <script src="jquery-3.3.1.min.js"></script>
    <script>
        $(function() {
            $(".css-button").click(function() {
                $(this).toggleClass("css-button-pressed");
            });
        });
    </script>
</html>
0
mrtoxas
Модератор
Эксперт HTML/CSS
2724 / 2012 / 1242
Регистрация: 12.07.2015
Сообщений: 5,406
Записей в блоге: 3
11.07.2018, 15:26 4
Цитата Сообщение от GRO_UA Посмотреть сообщение
Причем тут html и css?
HTML5
1
2
<input type="checkbox" class="btn-chk" id="btn">
<label for="btn" class="btn">Click me!</label>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.btn{
  display: inline-block;
  padding:5px;
  border:1px solid black;
  background-color:#eee;
  cursor:pointer;
}
.btn-chk{
  display: none;  
}
.btn-chk:checked + .btn{
  background-color:#ccc;
}
0
11.07.2018, 15:26
GRO_UA
7 / 7 / 8
Регистрация: 04.07.2018
Сообщений: 69
11.07.2018, 15:32 5
mrtoxas, это понятно, только человек искал скрипт "зажатия", а не обвертку) Как я понял
0
Qwerty_Wasd
investigator front-dev
Эксперт JSЭксперт HTML/CSS
1891 / 1140 / 543
Регистрация: 16.04.2016
Сообщений: 3,063
Завершенные тесты: 2
11.07.2018, 15:42 6
Если нужно только визуально, то можно не подключать JQuery. И даже нативный JS можно не использовать - https://codepen.io/qwerty_wasd/pen/xJbrzJ
HTML5
1
2
<input id="button" type="checkbox"/>
<label for="button">Кнопка</label>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#button{
  position:absolute;clip:rect(0,0,0,0);
}
label[for="button"]{
  border:1px solid #000;
  border-radius:5px;
  padding:10px;
  background:#009688;
  box-shadow:inset -5px -5px 45px 0px rgba(122,122,122,0.6),inset -3px -3px 10px 0px rgba(0,0,0,0.6);
  cursor:pointer;
}
#button:checked ~ label[for="button"]{
  box-shadow:inset 5px 5px 45px 0px rgba(122,122,122,0.6),inset 3px 3px 10px 0px rgba(0,0,0,0.6);
}
Конечно при нажатии на кнопку, что должно происходить, иначе зачем она нужна. Можно повесить на неё обработчик.
Javascript
1
2
3
document.querySelector('label[for="button"]').addEventListener('click',function(){
  //ваш код
})
Добавлено через 1 минуту
Блин)) mrtoxas, привет Отошел на минуту, дописал - и зря
0
скороход
2 / 2 / 0
Регистрация: 10.12.2017
Сообщений: 34
12.07.2018, 14:55  [ТС] 7
спасибо всем, буду пробовать=)

Добавлено через 22 часа 33 минуты
не ребят, не помогло
Вот мой код (знаю что корявый)
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html> 
<head> 
<title>Print Work</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" href="images/iconka.png"> 
 
</head>
 
<body>
 
<div class="button"></div>
<script src="JS.js"></script>
</body>
 
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
body{
 height: 100%;
 background: linear-gradient(45deg, rgba(34, 101, 163, .5), rgba(103, 0, 31, .6) ), url(images/fon.jpg);
 
}
 
/*.wrap {height: 200px;padding: 200px ;background: White;}*/ 
 
.button {
width: 70px;
height: 70px;
border-radius: 50%;
margin-left:20px; 
margin-top:20px;
transition: 0.45s ease-in-out;
background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa);
box-shadow:     inset 0 -3px 10px rgba(140, 140, 140,1), 
        inset 0 3px 10px rgba(0,0,0,.4),        
        0 2px 4px rgba(0,0,0,.9);           
}
 
 
.button:hover {
background: radial-gradient(farthest-side ellipse at top left, white, #c4c2c2);
}
 
.button:active {
  background: url("images/icon.png") , radial-gradient(farthest-side ellipse at top left, #eb7fff, #c56bd6);
  transform: rotate(360deg);
  box-shadow:
   0 0px 10px rgba(0,0,0,.5) inset,
   0 2px 50px rgba(0,0,0,.5) inset,
   0 2px 10px rgba(255,255,255,.1);
Вот эту анимированную кнопку хотелось бы оставить в состояние ".active "

Javascript
1
2
3
document.querySelector('button').addEventListener('click',function(){
  alert('he work!')
})
В дальнейшем с помощью JS хотелось бы вызвать анимацию основного меню (если это возможно).
Ну, типо, нажимаем на кнопку вылезает меню. Нажимаем еще раз, меню "скручивается" обратно .
0
rihnovec93
13 / 8 / 7
Регистрация: 15.04.2015
Сообщений: 37
14.07.2018, 04:37 8
Лучший ответ Сообщение было отмечено скороход как решение

Решение

скороход, привет.

Как вариант решения:
Добавить в css-файл описание стилей для зажатой кнопки:
CSS
1
2
3
4
5
6
7
8
.activated {
  background: radial-gradient(farthest-side ellipse at top left, #eb7fff, #c56bd6);
  transform: rotate(360deg);
  box-shadow:
   0 0px 10px rgba(0,0,0,.5) inset,
   0 2px 50px rgba(0,0,0,.5) inset,
   0 2px 10px rgba(255,255,255,.1);
}
Просто копипаст из .button:active

Чтобы кнопка при наведении курсора видоизменялась только в "не нажатом" состоянии, немного отредактировал селектор для button:hover:
CSS
1
2
3
.button:not(.activated):hover {
background: radial-gradient(farthest-side ellipse at top left, white, #c4c2c2);
}
В JS-коде querySelector ищет в HTML-документе первый элемент с тегом button. Чтобы искал с классом, нужно поставить точку, как это делается в CSS.
А с помощью toggle по каждому клику либо ставится, либо убирается наш новый класс activated:
Javascript
1
2
3
document.querySelector('.button').addEventListener('click',function(){
    this.classList.toggle("activated");
})
Добавлено через 3 минуты
Цитата Сообщение от скороход Посмотреть сообщение
В дальнейшем с помощью JS хотелось бы вызвать анимацию основного меню (если это возможно).
Ну, типо, нажимаем на кнопку вылезает меню. Нажимаем еще раз, меню "скручивается" обратно .
В сети есть множество готовых решений. Стоит лишь покопать в сторону jQuery Accordeon.
0
14.07.2018, 04:37
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.07.2018, 04:37

Как написать регулярное выражение для выдергивания английских букв и символов: "+", ",", ":", "-", " ", "!", "?" и "."
Не могу ни как собразить как написать регулярное выражение для выдергивания английских букв и...

Получить значение из {"text1":"val1","text2":"val2","text3":{"text":"val"}}
Есть такая строка var my = '{&quot;text1&quot;:&quot;val1&quot;,&quot;text2&quot;:&quot;val2&quot;,&quot;text3&quot;:{&quot;text&quot;:&quot;val&quot;}}'; Как из...

"Определение и сохранение координат при нажатии на картинке ЛКМ"
Задача заключается в следующем: Использую &quot;Opera&quot;, при открытии странички, по середине находится...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru