帶收音機的選項卡式導航

Question

<label><input type="radio" name="group1" selected="selected" /> one </label> 
<label><input type="radio" name="group1" /> two </label> 

<fieldset id="one"> one </fieldset> 
<fieldset id="two"> two </fieldset> 

我想根據所選無線電每次顯示一個字段集。我知道如何處理<a>，但收音機似乎很難。

感謝您的幫助

Answer 1

你可以給他們一個共同的類，像這樣：

<fieldset id="one" class="sets"> one </fieldset> 
<fieldset id="two" class="sets"> two </fieldset> 

然後給匹配的值的ID的單選按鈕，如下所示：

<label><input type="radio" name="group1" checked="checked" value="one" /> one </label> 
<label><input type="radio" name="group1" value="two" /> two </label> 

然後裝起來和onchange事件，像這樣：

$(function() { 
    $("input[name=group1]").change(function() { 
    $(".sets").hide();   //hide them all 
    $("#" + this.value).show(); //show the one you clicked 
    }).filter(':checked').change();     //show the appropriate one on load 
}); 

You can give it a try here，所有這些都是每次發生更改時，都隱藏所有<fieldset>元素，然後僅顯示具有相應ID的元素。