Создание вкладок без использования JQuery

В инете навалом статей про создание вкладок, однако там везде JQuery, да и вообще, все они жутко похожи друг на друга.

А вдруг у вас на сайте jQuery не используется? Тогда всё, что нам потребуется, это одна JavaScript-функция и немного хтмла.

Вот это, собственно, она и есть:

function SwitchTab(my_tab, my_content) {
	document.getElementById('content_1').style.display = 'none';
	document.getElementById('content_2').style.display = 'none';
	document.getElementById(my_content).style.display = 'block';  
	document.getElementById('tb_1').className = '';
	document.getElementById('tb_2').className = '';
	document.getElementById(my_tab).className = 'active';
}

Можете вынести её в отдельный js-файл и подключить, либо засунуть прямо в код — это неважно.

А вот и сами вкладки:

<ul>
	<li><a href="javascript:SwitchTab('tb_1', 'content_1');" id="tb_1" class="active">Первая</a></li>
	<li><a href="javascript:SwitchTab('tb_2', 'content_2');" id="tb_2">Вторая</a></li>
</ul>
 
<div id="content_1"> 
	<!-- содержимое первой вкладки -->
</div> 
<div id="content_2" style="display:none;">
	<!-- содержимое второй вкладки -->
</div>

Демо есть на сайте art8you.net, там вкладки находятся в сайдбаре.

Естественно, вкладок можно добавлять сколько угодно, а не только две или три, вы также можете расположить их по вертикали и по горизонтали при помощи CSS-стилей.

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

Комментарии 14

  • Полина25 марта 2012 в 13:03 #

    Очень хороший пример, довольно простой. Но этот код работает, если на странице один блок со вкладками. Если их несколько на странице, то переключаются вкладки только первого блока. Как сделать чтобы все блоки работали нормально?

  • Полина27 марта 2012 в 01:03 #

    Количество таких блоков не определённо. Создается несколько документов и выводится на одной странице. Есть например переменная - уникальный номер документа или код изделия. Как в таком скрипте вместо content_1 и tb_1 прописать уникальный номер через переменные: код-content_1 и код-tb_1?

    • Миша29 марта 2012 в 05:03 #
      function <?php echo $kod ?>SwitchTab(my_tab, my_content) {
      document.getElementById('<?php echo $kod ?>content_1').style.display = 'none';
      document.getElementById('<?php echo $kod ?>content_2').style.display = 'none';
      document.getElementById(my_content).style.display = 'block';
      document.getElementById('<?php echo $kod ?>tb_1').className = '';
      document.getElementById('<?php echo $kod ?>tb_2').className = '';
      document.getElementById(my_tab).className = 'active';
      }

      аналогично будет и в HTML:

      <ul><li>
      <a href="javascript:<?php echo $kod ?>SwitchTab('<?php echo $kod ?>tb_1', '<?php echo $kod ?>content_1');" id="'<?php echo $kod ?>tb_1"
      class="active">Первая</a>
      </li><li>
      <a href="javascript:<?php echo $kod ?>SwitchTab('<?php echo $kod ?>tb_2', '<?php echo $kod ?>content_2');" id="'<?php echo $kod ?>tb_2"
      >Вторая</a>
      </li></ul>
       
      <div id="<?php echo $kod ?>content_1">
      </div>
      <div id="<?php echo $kod ?>content_2" style="display:none;">
      </div>
    • Миша29 марта 2012 в 05:03 #

      но если переменная $kod будет цифрой, то лучше вставлять его не перед словом, а после)

  • Полина31 марта 2012 в 22:03 #

    И еще маленький вопросик)) Все работает, если код ($kod) состоит из букв. Но код вводится буквами и цифрами, и возможно только цифрами, и в таком случае вкладки не работают. Пробовала до и после слова ставить - не получается. Формат поля ввода кода текстовый. Что еще нужно сделать?

    • Миша1 апреля 2012 в 05:04 #

      Пробовала после слова ставить – не получается.

      по идее это должно помочь))
      Можно я взгляну на твой сайт?

  • Полина3 апреля 2012 в 09:04 #

    Не помогает после слова, может я тебя не понимаю...
    Вот здесь сайт: fabrica.0fees.net

  • Полина3 апреля 2012 в 16:04 #

    Не, не работает, просто в поле буквы прописала, там где цифры - не работает...

  • Полина3 апреля 2012 в 21:04 #

    Да, работает!)) Оказывается не работало там, где код указывался с тире -.
    Спасибо большое!!

    • Миша4 апреля 2012 в 04:04 #

      отлично)) ну да, тире в названиях функций быть не должно, скрипт думает, что это "минус" )

  • Сергей12 января 2013 в 11:01 #

    Что-то не хочет у меня работать, пойду настраивать.

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • alex morozov: Ура, спасибо! Все-таки я разобрался ! Сделал:

  • alex morozov: Сделал Класс добаляется даже если поле пустое

  • Vladislav: Лучше бы посоветовали изящное решение имеющейся проблемы.

  • alex morozov: Не очень понял. Я добавляю метабокс через класс, почти как у вас. class Desc_Meta_Box { private $screens = array(...

  • Миша: Метод тыка хорош, но оснвоы нужно знать в любом случае. Рекомендую почитать это.