Question

我想为此HTML和CSS代码添加一个函数。

HTML

<div class="switch">
  <input name="sincro" type="radio" checked="checked">
  <label>O</label>
  <input name="sincro" type="radio">
  <label>I</label>
</div>

CSS

.switch {position:relative; overflow:hidden; border:1px gray solid; background-color:white; }
.switch label {position:relative; z-index:2; float:left; width:50%; height:100%; -webkit-transition:all 0.1s ease-out; -moz-transition:all 0.1s ease-out; transition:all 0.1s ease-out; background-color:gray; }
.switch input {position:absolute; z-index:3; opacity:0; width:100%; height:100%; -moz-appearance:none; }
.switch input:hover, div.switch input:focus {cursor:pointer; }
.switch input:checked {display:none; }
.switch input {display:block; }
.switch input:first-of-type + label {left:-50%; }
.switch input:first-of-type:checked + label {left:0%; }
.switch input:last-of-type + label {right:-50%; left:auto; background-color:green; }
.switch input:last-of-type:checked + label {right:0%; left:auto; }

在实践中，我会以图形方式保持模拟按钮ON和OFF的功能，并实现显示和隐藏具有特定ID =＆＃34;＆＃34;的一个DIV的功能。

我只尝试使用CSS或使用javascript，但它完全无法正常工作，因为如果工作模拟了隐藏和显示不起作用...请帮助!!!

Answer 1

听起来我想要根据是否选择了无线电选项来显示或隐藏div。我把以下小提琴放在一起，根据按钮切换div的显示：

http://jsfiddle.net/pYVys/

它使用Bootstrap CSS库进行样式化，使用jQuery作为逻辑。所有这一切都是在按钮上切换btn-info CSS类以更改其颜色，并在div上显示hidden类以根据按钮点击显示/隐藏它。

HTML非常简单：

<button id="toggle-button" class="btn">Toggle</button>
<div id="hidden-div" class="hidden">I am in the div</div>

JavaScript很小：

$('#toggle-button').click(function () {
    $(this).toggleClass('btn-info');
    $('#hidden-div').toggleClass('hidden');
});

CSS技巧或javascript

1 个答案: