Как создать кнопку переключения?

Я хочу создать кнопку переключения в html с помощью css. Я хочу, чтобы, когда вы нажимаете на него, он оставался нажатым, а когда вы нажимаете на него снова, он выскакивал.

Если нет возможности сделать это, просто используя css. Есть ли способ сделать это с помощью jQuery?

Я написал учебник о том, как создавать переключатели включения / выключения только с помощью CSS3, JS не требуется. Здесь вы можете увидеть демо

— Felix Hagspiel 08.01.2015 16:13

Вот учебник по Как создать плагин JQuery для преобразования переключателей в переключатели и Здесь вы можете увидеть демо

— Gopal Joshi 13.02.2017 08:15
jquery html css
21.11.2008 18:18
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
104
2
247 436
15
Перейти к ответу Данный вопрос помечен как решенный

Ответы 15

Я был бы склонен использовать класс в вашем CSS, который изменяет стиль границы или ширину границы, когда кнопка нажата, поэтому он выглядит как кнопка переключения.

21.11.2008 18:20

Вы можете использовать элемент привязки (<a></a>) и использовать: active и: ссылку, чтобы изменить фоновое изображение для включения или выключения. Просто мысль.

Обновлено: вышеуказанный метод не слишком хорошо работает для переключения. Но вам не нужно использовать jquery. Напишите простую функцию javascript onClick для элемента, которая соответствующим образом изменяет фоновое изображение, чтобы оно выглядело так, как будто кнопка нажата, и устанавливает какой-либо флаг. Затем при следующем щелчке изображение и флаг меняются местами. Вот так

var flag = 0;
function toggle(){
if (flag==0){
    document.getElementById("toggleDiv").style.backgroundImage = "path/to/img/img1.gif";
    flag=1;
}
else if (flag==1){
    document.getElementById("toggleDiv").style.backgroundImage = "path/to/img/img2.gif";
    flag=0;
}
}

И вот так html <div id = "toggleDiv" onclick = "toggle()">Some thing</div>

21.11.2008 18:30

Вы можете использовать «активный» псевдокласс (впрочем, он не будет работать в IE6 для других элементов, кроме ссылок)

a:active
{
    ...desired style here...
}
21.11.2008 18:37

Если вам нужна правильная кнопка, вам понадобится javascript. Что-то вроде этого (нужно немного поработать над стилем, но суть вы уловили). Честно говоря, не стал бы использовать jquery для чего-то столь тривиального.

<html>
<head>
<style type = "text/css">
.on { 
border:1px outset;
color:#369;
background:#efefef; 
}

.off {
border:1px outset;
color:#369;
background:#f9d543; 
}
</style>

<script language = "javascript">
function togglestyle(el){
    if (el.className == "on") {
        el.className = "off";
    } else {
        el.className = "on";
    }
}
</script>

</head>

<body>
<input type = "button" id = "btn" value = "button" class = "off" onclick = "togglestyle(this)" />
</body>
</html>
21.11.2008 19:09
Ответ принят как подходящий

Хорошим семантическим способом было бы использовать флажок, а затем стилизовать его по-разному, независимо от того, установлен он или нет. Но хороших способов сделать это нет. Вам нужно добавить дополнительный диапазон, дополнительный div и, для действительно красивого вида, добавить javascript.

Итак, лучшее решение - использовать небольшую функцию jQuery и два фоновых изображения для стилизации двух разных состояний кнопки. Пример с эффектом вверх / вниз, заданным границами:

$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});
a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id = "button" title = "button">Press Me</a>

Очевидно, вы можете добавить фоновые изображения, которые представляют кнопки вверх и вниз, и сделать цвет фона прозрачным.

Вот скрипт JS с этим кодом, чтобы вы могли попробовать его вживую ... jsfiddle.net/LmULE

— Evan 02.02.2012 22:20

К вашему сведению: я сделал то же самое, что и этот пост, только с помощью Google Dart steelpinjata.com/2014/03/20/toggle-buttons-in-dart. Примечание: работает в Chromium, но может быть скомпилирован в JavaScript и будет работать в других современных браузерах. IE не считается браузером ;-)

— Serge Merzliakov 20.03.2014 04:36
21.11.2008 19:20

Есть плагин jquery от Swizec, который, помимо прочего, может делать это: https://github.com/Swizec/styled-button

(Старая ссылка была http://swizec.com/code/styledButton/, я не тестировал полностью замену, просто нашел ее с помощью Google.)

02.10.2009 14:08

Пользовательский интерфейс JQuery упрощает создание кнопок-переключателей. Просто положи это

<label for = "myToggleButton">my toggle button caption</label>
<input type = "checkbox" id = "myToggleButton" />

на вашей странице, а затем в вашем теле onLoad или $.ready() (или некоторые объектные литералы функции init(), если вы создаете сайт ajax ..), отбросьте некоторый JQuery, например:

$("#myToggleButton").button()

Это оно. (не забудьте < label for=...>, потому что JQueryUI использует его для тела кнопки переключения ..)

Оттуда вы просто работаете с ним, как с любым другим input = "checkbox, "потому что это то, чем является базовый элемент управления, но пользовательский интерфейс JQuery просто скроет его, чтобы он выглядел как красивая кнопка переключения на экране.

Учитывая, что OP добавил тег jquery, это отличный ответ. Данный jqueryUI может использоваться для обеспечения согласованного стиля.

— Joe Johnston 21.12.2016 02:15
20.07.2010 04:09

Поскольку я тоже искал ответ и хотел выполнить его с помощью CSS. Я нашел решение от CSS NINJA Это хорошее внедрение <input type = "checkbox"> и некоторых css. Живая демонстрация! Хотя это не работает в IE 8, вы можете реализовать selectivizr! и исправить CSS, где используется opacity, на filter, чтобы заставить его работать в IE.

РЕДАКТИРОВАТЬ 2014:

для новых кнопок переключения я использую решение, найденное на Блог Леа Веру, визуально похожее на флажок iOS

22.08.2011 20:24

Я не думаю, что использование JS для создания кнопки - хорошая практика. Что, если браузер пользователя отключит JavaScript?

Кроме того, вы можете просто использовать для этого флажок и немного CSS. И легко получить состояние вашего флажка.

Это всего лишь один пример, но вы можете оформить его так, как хотите.

http://jsfiddle.net/4gjZX/

HTML

<fieldset class = "toggle">
  <input id = "data-policy" type = "checkbox" checked = "checked" />
  <label for = "data-policy">
  <div class = "toggle-button">
    <div class = "toggle-tab"></div>
  </div>
  Toggle
  </label>
</fieldset>​

CSS

.toggle label {
  color: #444;
  float: left;
  line-height: 26px;
}
.toggle .toggle-button {
  margin: 0px 10px 0px 0px;
  float: left;
  width: 70px;
  height: 26px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#fafafa));
  background-image: -webkit-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -moz-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -o-linear-gradient(top, #eeeeee, #fafafa);
  background-image: -ms-linear-gradient(top, #eeeeee, #fafafa);
  background-image: linear-gradient(top, #eeeeee, #fafafa);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#eeeeee', EndColorStr='#fafafa');
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border: 1px solid #D1D1D1;
}
.toggle .toggle-button .toggle-tab {
  width: 30px;
  height: 26px;
  background-color: #fafafa;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eeeeee));
  background-image: -webkit-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -moz-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -o-linear-gradient(top, #fafafa, #eeeeee);
  background-image: -ms-linear-gradient(top, #fafafa, #eeeeee);
  background-image: linear-gradient(top, #fafafa, #eeeeee);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#fafafa', EndColorStr='#eeeeee');
  border: 1px solid #CCC;
  margin-left: -1px;
  margin-top: -1px;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: 5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}
.toggle input[type=checkbox] {
  display: none;
}
.toggle input[type=checkbox]:checked ~ label .toggle-button {
  background-color: #2d71c2;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#2d71c2), to(#4ea1db));
  background-image: -webkit-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -moz-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -o-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: -ms-linear-gradient(top, #2d71c2, #4ea1db);
  background-image: linear-gradient(top, #2d71c2, #4ea1db);
  filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#2d71c2', EndColorStr='#4ea1db');
}
.toggle input[type=checkbox]:checked ~ label .toggle-button .toggle-tab {
  margin-left: 39px;
  -webkit-box-shadow: -5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
  -moz-box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
  box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}​

Надеюсь это поможет

23.06.2012 17:08

Вот один из примеров / вариантов (более подробно описанных) ToggleButton с использованием jQuery с реализацией <label for = "input">.

Сначала мы создадим контейнер для нашего ToggleButton, используя классический HTML <input> и <label>.

<span>
  <input type = "checkbox" value = "1" name = "some_feature_to_select" id = "feature_cb" style = "display: none;"> <!-- We can hide checkbox bec. we want <label> to be a ToggleButton, so we don't need to show it. It is used as our value holder -->
  <label for = "feature_cb" id = "label_for_some_feature">
    <img alt = "Stylish image" src = "/images/icons/feature.png">
  </label>
</span>

Далее мы определим функцию для переключения нашей кнопки. Наша кнопка на самом деле представляет собой обычный <label>, который мы будем стилизовать для представления переключения значений.

function toggleButton(button) {

var _for = button.getAttribute('for'); // defining for which element this label is (suppose element is a checkbox (bec. we are making ToggleButton ;) )
var _toggleID = 'input#'+_for; // composing selector ID string to select our toggle element (checkbox)
var _toggle = $( _toggleID ); // selecting checkbox to work on
var isChecked = !_toggle.is(':checked'); // defining the state with negation bec. change value event will have place later, so we negating current state to retrieve inverse (next).

if (isChecked)
    $(button).addClass('SelectedButtonClass'); // if it is checked -> adding nice class to our button (<label> in our case) to show that value was toggled
else
    $(button).removeClass('SelectedButtonClass'); // if value (or feature) was unselected by clicking the button (<label>) -> removing .SelectedButtonClass (or simply removing all classes from element)
}

Функция реализована многоразово. Вы можете использовать его для более чем одной, двух или даже трех созданных вами кнопок ToggleButton.

... и, наконец ... чтобы заставить его работать должным образом, мы должны привязать функцию переключения к событию (событию "изменение") нашей импровизированной кнопки <label> (это будет событие click, потому что мы не изменяем checkbox напрямую, поэтому событие change не может быть запущено для <label>).

$(document).ready(function(){

    $("#some_feature_label").click(function () {
        toggleButton(this); // call function with transmitting instance of a clicked label and let the script decide what was toggled and what to do with it
    });

    $("#some_other_feature_label").click(function () {
        toggleButton(this); // doing the same for any other feature we want to represent in a way of ToggleButton
    });

});

С помощью CSS мы можем определить backgorund-image или какой-нибудь border для представления изменения значения, в то время как <label> сделает за нас работу по изменению значения флажка;).

Надеюсь, это кому-то поможет.

+ эта реализация, похоже, корректно работает и на мобильных устройствах, т.к. Реализация CCS, предложенная выше TDeBailleul, не работала должным образом на Android (браузер Android 2.3.5 по умолчанию; Opera Mobile в той же системе была в порядке).

— Paul T. Rawkeen 24.07.2012 23:09

Также вместо .addClass() / .removeClass() можно использовать .toggleClass(), но описанный метод явно определяет действия для значений checked / unchecked.

— Paul T. Rawkeen 25.07.2012 11:19
24.07.2012 19:39

В сочетании с ответом это вы также можете использовать этот стиль, похожий на переключатель мобильных настроек.

togglers

HTML

<a href = "#" class = "toggler">&nbsp;</a>
<a href = "#" class = "toggler off">&nbsp;</a>
<a href = "#" class = "toggler">&nbsp;</a>

CSS

a.toggler {
    background: green;
    cursor: pointer;
    border: 2px solid black;
    border-right-width: 15px;
    padding: 0 5px;
    border-radius: 5px;
    text-decoration: none;
    transition: all .5s ease;
}

a.toggler.off {
    background: red;
    border-right-width: 2px;
    border-left-width: 15px;
}

jQuery

$(document).ready(function(){
    $('a.toggler').click(function(){
        $(this).toggleClass('off');
    });
});

Может быть намного красивее, но дает представление. Одним из преимуществ является то, что его можно анимировать с помощью CSS
. Скрипач

26.07.2012 17:46

Пытаться;

<li>Text To go with Toggle Button<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'somename' id = 'someid' /></span></li>

И убедитесь, что в

<head><link rel = 'stylesheet' src = 'theme.css'> (from jqtouch - downloadable online)
      <link rel = 'text/javascript' src = 'jquery.js'> (also from jqtouch)
</head>

Помните, что при кодировании Толькоsomename и someid могут изменяться во входном теге, иначе это не сработает.

02.10.2012 18:40

Вы можете просто использовать toggleClass() для отслеживания состояния. Затем вы проверяете, есть ли у элемента кнопки класс, например:

$("button.toggler").click( function() {
    $me = $(this);
    $me.toggleClass('off');
    if ($me.is(".off")){
        alert('hi');
    }else {
        alert('bye');
    }
});

И я использую элемент button для кнопок по смысловым причинам.

<button class = "toggler">Toggle me</button>
30.10.2013 04:32

Попробуйте этот бит:

input type = "button" 
                           data-bind = "css:{on:toggleButton, off:toggleButton!=true},value:toggleButton,click: function() { $data.toggleButton(!($data.toggleButton()))}" />

in viewModel
self.toggleButton = ko.observable(false);
08.01.2014 14:37

вот пример использования pure css:

  .cmn-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
  }
  .cmn-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
  }
  input.cmn-toggle-round + label {
    padding: 2px;
    width: 120px;
    height: 60px;
    background-color: #dddddd;
    border-radius: 60px;
  }
  input.cmn-toggle-round + label:before,
  input.cmn-toggle-round + label:after {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    bottom: 1px;
    content: "";
  }
  input.cmn-toggle-round + label:before {
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 60px;
    transition: background 0.4s;
  }
  input.cmn-toggle-round + label:after {
    width: 58px;
    background-color: #fff;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: margin 0.4s;
  }
  input.cmn-toggle-round:checked + label:before {
    background-color: #8ce196;
  }
  input.cmn-toggle-round:checked + label:after {
    margin-left: 60px;
  }
<div class = "switch">
  <input id = "cmn-toggle-1" class = "cmn-toggle cmn-toggle-round" type = "checkbox">
  <label for = "cmn-toggle-1"></label>
</div>
28.11.2014 07:12

Другие вопросы по теме

Размещайте div вправо, не влияя на дизайн
Стандарт связывания элементов тега <h>
Отладчик, похожий на Firebug, для Google Chrome
Каков наилучший способ HTTP-передачи файла с клиента на сервер в Java 1.5?
Нужен быстрый способ проверки правильности вложенности HTML-тегов
IE неправильно отображает тег <A>
Как воспроизвести: Ошибка сценария, «Объект не поддерживает это свойство или метод»
Как отфильтровать все теги HTML, кроме определенного белого списка?
Могу ли я изменить размер флажка с помощью CSS?
Гибкий макет CSS и границы

Похожие вопросы

JQuery - Как мне исправить этот ролловер изображения?
Чтение выбранного значения из asp: RadioButtonList с помощью jQuery
Запуск Javascript "onMouseOver" для детей?
Изящная деградация jQuery
JQuery slideUp (). remove (), похоже, не показывает анимацию slideUp до того, как произойдет удаление
JQuery перетаскиваемые элементы таблицы
Как использовать значение переменной во время объявления в анонимной функции JavaScript?
Использование jQuery, ограничение размера файла перед загрузкой
Как выбрать один элемент в jQuery?
Библиотеки JavaScript - параллельное сравнение