Обратите внимание: все стили кнопок в данных примерах - это стили сайта и в примерах их нет
Вывод блока при изменении RADIO
Для кнопок radio может быть выбрано только одно значение. Соотв. при изменении выбора мы прячем все блоки и показываем блок с ID равным значению value кнопки.
Если нет возможности привязать блок к value, например, если оно несет в себе много текстовой информации, можно по аналогии использовать любой data-атрибут.
|
1 2 3 4 5 6 7 8 9 10 11 |
<input id="radio-1" class="radio" type="radio" name="radioname" value="radio-block-1" /> <label for="radio-1">Показать блок 1</label> <input id="radio-2" class="radio" type="radio" name="radioname" value="radio-block-2" /> <label for="radio-2">Показать блок 2</label> <input id="radio-3" class="radio" type="radio" name="radioname" value="radio-block-3" /> <label for="radio-3">Показать блок 3</label> <input id="radio-4" class="radio" type="radio" name="radioname" value="radio-block-4" /> <label for="radio-4">Вариант без блока</label> <div id="radio-block-1" class="radio-blocks" style="display:none">Показан блок 1</div> <div id="radio-block-2" class="radio-blocks" style="display:none">Показан блок 2</div> <div id="radio-block-3" class="radio-blocks" style="display:none">Показан блок 3</div> |
|
1 2 3 4 5 6 7 |
$(function() { $("#" + $(".radio:checked").val()).show(); $(".radio").change(function(){ $(".radio-blocks").hide(); $("#" + $(this).val()).show(); }); }); |
Вывод блока при изменении CHECKBOX
С кнопками checkbox может быть масса различных вариантов, например, показать блок при выбранных 2-х конкретных или сделать одни неактивными, когда выбраны другие и т.д.
В примере сделано как и в предыдущем варианте, а именно, активный чекбокс = показанный блок с его значением value
|
1 2 3 4 5 6 7 8 9 10 11 |
<input id="checkbox-1" class="checkbox" type="checkbox" name="checkboxname" value="checkbox-block-1" /> <label for="checkbox-1">Показать блок 1</label> <input id="checkbox-2" class="checkbox" type="checkbox" name="checkboxname" value="checkbox-block-2" /> <label for="checkbox-2">Показать блок 2</label> <input id="checkbox-3" class="checkbox" type="checkbox" name="checkboxname" value="checkbox-block-3" /> <label for="checkbox-3">Показать блок 3</label> <input id="checkbox-4" class="checkbox" type="checkbox" name="checkboxname" value="checkbox-block-4" /> <label for="checkbox-4">Вариант без блока</label> <div id="checkbox-block-1" class="checkbox-blocks" style="display:none">Показан блок 1</div> <div id="checkbox-block-2" class="checkbox-blocks" style="display:none">Показан блок 2</div> <div id="checkbox-block-3" class="checkbox-blocks" style="display:none">Показан блок 3</div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function() { $(".checkbox:checked").each(function() { $("#" + $(this).val()).show(); }); $(".checkbox").click(function(){ if($(this).is(":checked")) { $("#" + $(this).val()).show(); } else { $("#" + $(this).val()).hide(); } }); }); |
Вывод блока при изменении SELECT
Вариант практически точно такой же, как с кнопками radio.
|
1 2 3 4 5 6 7 8 9 |
<select id="select"> <option value="select-block-1">Показать блок 1</option> <option value="select-block-2">Показать блок 2</option> <option value="select-block-3">Показать блок 3</option> <option value="select-block-4">Вариант без блока</option> </select> <div id="select-block-1" class="select-blocks" style="display:none">Показан блок 1</div> <div id="select-block-2" class="select-blocks" style="display:none">Показан блок 2</div> <div id="select-block-3" class="select-blocks" style="display:none">Показан блок 3</div> |
|
1 2 3 4 5 6 7 |
$(function() { $("#" + $("#select option:selected").val()).show(); $("#select").change(function(){ $(".select-blocks").hide(); $("#" + $(this).val()).show(); }); }); |
Есть вариант с кнопками?
Это или табы или просто кнопки, например:
Открытие и закрытие контента
Вкладки openTabby
Горизонтальные вкладки
Или просто на бутстрапе