CSS技巧或javascript

我想爲此HTML和CSS代碼添加一個函數。CSS技巧或javascript

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和執行功能，以顯示和隱藏一個DIV與功能具體的ID =「」。

我試過只用CSS或JavaScript，但它完全沒有工作，因爲如果工程模擬botton隱藏和顯示不起作用...請幫助!!!

來源

2014-05-19 user2295617

會你把你的代碼放在小提琴？ –

更重要的是，你會把你的代碼的相關部分放在你的問題中嗎？ –

您的問題標題不完整。 CSS或JS做什麼？ – slebetman

聽起來像你想顯示或隱藏一個div的基礎上是否選擇一個無線電選項。我總結了以下小提琴是基於切換按鈕上一個div的顯示：

http://jsfiddle.net/pYVys/

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

來源

2014-05-19 08:56:59 berto

謝謝，但這不是我想要的。我試圖將您的建議併入我的代碼，但它不起作用，因爲我不想使用標籤按鈕，DIV不會出現。 http://jsfiddle.net/Fwxe6/1/ – user2295617

解決http://jsfiddle.net/Fwxe6/3/感謝您的建議... – user2295617

不錯的工作。我的JavaScript與你的小提琴一起工作：http://jsfiddle.net/Fwxe6/5/。此外，請查看http://www.bootstrap-switch.org/，使交換機超級漂亮。小提琴在這裏使用它：http://jsfiddle.net/Fwxe6/7/ – berto

CSS技巧或javascript

回答

相關問題