• 156
  • 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет. Вот тоже нашел в загашнике не очень свежую тему, но всетаки выложу вдруг кому пригодится. Сегодня затронем тему чекбоксов и скрытого текста. То есть в этом примере при нажатии на чекбокс появляется скрытый текст. Все это работает на JS и все просто дальше не куда.
И так приступим:
1.Добавляем скрипт между <head>и </head>:

Код:
<script type="text/javascript">
function showOrHide(hak, cat) {
hak = document.getElementById(hak);
cat = document.getElementById(cat);
if (hak.checked) cat.display = "block";
else cat.style.display = "none";
}
</script>
Как видно из скрипта , он задаёт стили display = "block"; и style.display = "none"; для нашего текста.

2.Далее там где хотим вывести чекбокс и скрытый текст добавляем код
Код:
<div>
<input type = 'checkbox' id = 'hak1' onchange = 'showOrHide("hak1", "cat1");'/>Показать содержимое категории 1
<br />
<div id = 'cat1' style = 'display: none;'>Содержимое категории 1</div>
<input type = 'checkbox' id = 'hak2' onchange = 'showOrHide("hak2", "cat2");' />Показать содержимое категории 2
<br />
<div id = 'cat2' style = 'display: none;'>Содержимое категории 2</div>
<input type = 'checkbox' id = 'hak3' onchange = 'showOrHide("hak3", "cat3");' />Показать содержимое категории 3
<br />
<div id = 'cat3' style = 'display: none;'>Содержимое категории 3</div>
</div>
Если нужно добавить еще checkbox, тогда добавьте вот этот код перед </div>

Как видим из примера меняем переменные только "bloggood1,2,3..." и "cat1,2,3...".
Вот и все,пользуемся

Можешь почитать и вот эту статейку " HTML вкладки"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Как вам наш дизайн сайта?
Результаты

----