三通類撥動

我有兩個單選按鈕來切換兩種可供選擇的文本，它的工作原理：三通類撥動

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" 
      type="text/javascript"></script> 
    <style type="text/css"> 
     .displayNone { display: none; } 
    </style> 
</head> 

<body> 

    <input type="radio" name="toggle" />A 
    <input type="radio" name="toggle" />B 

    <span class="A">A</span> 
    <span class="B displayNone">B</span> 

<script type="text/javascript"> 
    $('input[name=toggle]').change(function() { 
     $('.A, .B').toggleClass('displayNone'); 
    }) 
</script> 

</body> 
</html>

現在我想讓它三個單選按鈕，三種文本之間切換：

<input type="radio" name="toggle" />A 
<input type="radio" name="toggle" />B 
<input type="radio" name="toggle" />C 

<span class="A">A</span> 
<span class="B displayNone">B</span> 
<span class="C displayNone">C</span>

我正在考慮的解決方案看起來太冗長了。乾淨的會是什麼？

來源

2012-04-24 Clodoaldo Neto

一名方法：

$('input:radio[name="toggle"]').change(
    function(){ 
     $('span') 
      .eq($(this).index()) 
      .removeClass('displayNone') 
      .siblings('span') 
      .addClass('displayNone'); 
    });

JS Fiddle demo。

編輯增加，對於更先進的最新的瀏覽器，實現相同的純CSS方式：

input[type=radio]:nth-child(1):checked ~ span:nth-of-type(1), 
input[type=radio]:nth-child(2):checked ~ span:nth-of-type(2), 
input[type=radio]:nth-child(3):checked ~ span:nth-of-type(3){ 
    height: 1em; 
    width: 100%; 
    background-color: #f90; 
    -webkit-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    transition: all 1s linear; 
} 

span { 
    display: block; 
    overflow: hidden; 
    height: 0; 
    width: 0; 
    background-color: #fff; 
    -webkit-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    transition: all 1s linear; 
}

JS Fiddle demo。

jQuery的參考文獻：

CSS參考文獻：

來源

2012-04-24 16:36:27

+1的編輯和更新以前的問題 – 2014-05-01 10:37:58

給你所有的文字跨越同一類，但不同的ID：

<span class="foo" id="span_a">A</span> 
<span class="foo displayNone" id="span_b">B</span> 
<span class="foo displayNone" id="span_c">C</span>

然後，顯示要

function show(x) { 
    $(".foo").hide(); 
    $("#" + x).show(); 
}

編輯一個前隱藏一切：

或者，你可以使用jQuery的而不是選擇器，如果你看到一個閃爍：

$(".foo").not("#" + x).hide(); 
$("#" + x).show();

來源

2012-04-24 16:31:58 lynks

以下是一種方法：jsFiddle example。

$('input[name=toggle]').change(function() { 
    $('span').addClass('displayNone').filter('span:eq(' + $(this).index() + ')').removeClass('displayNone'); 
})

來源

2012-04-24 16:37:07 j08691

而這裏的另一種方式來做到這一點（演示：http://jsfiddle.net/bauKH/）

<input type="radio" name="toggle" value="A" checked="true"/>A 
<input type="radio" name="toggle" value="B"/>B 
<input type="radio" name="toggle" value="C"/>C 

<br /> 
<span id="A" class="data">A</span> 
<span id="B" class="data displayNone">B</span> 
<span id="C" class="data displayNone">C</span>

$('input[name=toggle]').change(function() { 
    var newval = this.value; 
    $(".data").each(function() { 
     $(this).toggleClass('displayNone', this.id != newval); 
    });              
});

這裏的外賣消息是，你可以使用可選的第二個參數中.toggleClass()指定是否應該添加或刪除類。

來源

2012-04-24 16:46:58

只是爲了好玩，這可能並不適合您的需求。這是一個純粹的CSS解決方案。

span { 
    display: none; 
} 

input[type="radio"]:checked + * + * + * { 
    display: inline; 
}

來源

2012-04-24 16:52:46

這是可笑的發明！ +1 =） – 2012-04-24 17:47:25

這相當漂亮:) – 2012-04-24 21:19:09

回答

相關問題