Создание вкладок без использования 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-стилей.

Миша

В последние годы я долго не знал, что мне делать с сайтом misha.blog, ведь он практически не приносит никакого профита, но недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

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

  • Полина 25 марта 2012 #

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

    • Миша 26 марта 2012 #

      нужно прописывать разные ID элементов)

    • Миша 26 марта 2012 #

      и пусть для каждых вкладок будет своя функция

  • Полина 27 марта 2012 #

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

    • Миша 29 марта 2012 #
      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 #

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

  • Полина 31 марта 2012 #

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

    • Миша 1 апреля 2012 #

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

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

  • Полина 3 апреля 2012 #

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

    • Миша 3 апреля 2012 #

      вижу, что уже всё работает))

  • Полина 3 апреля 2012 #

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

  • Полина 3 апреля 2012 #

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

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

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

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

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

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

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.