Навигация с вкладками и радио

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> s, но радио кажется сложным.

Спасибо за вашу помощь

Answer 1

Вы можете задать им общий класс, например:

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

Затем присвойте переключателям соответствующие значения для идентификаторов, например:

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

Вы можете попробовать здесь , все, что он делает, это каждый раз, когда происходит изменение, скрывайте все элементы <fieldset> с этимкласс, затем показать только один с соответствующим идентификатором.