javascript - CSS 技巧或 javascript

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; }

在实践中，我会以图形方式保留模拟按钮打开和关闭的功能，并实现显示和隐藏具有特定 ID=""的 DIV 的功能。

我尝试仅使用 CSS 或使用 javascript，但它不能完全工作，因为如果工作，则按钮的模拟工作隐藏和显示不起作用...请帮助!!!

Answer 1

在我看来，您想根据是否选择单选选项来显示或隐藏 div。我整理了以下基于按钮切换 div 显示的 fiddle :

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');
});