Как сделать вкладку в HTML?

При нажатии на вкладку A покажите содержимое для вкладки A. Нажмите вкладку B, покажите контент для вкладки B и т.д.

Какой самый простой и совместимый способ построения фрагмента HTML?

Я не хочу использовать какие-либо библиотеки здесь, поэтому ни один из jQuery или других библиотек.

Ответы

Ответ 1

Если вы хотите перевернуть свой собственный элемент управления вкладкой, вы можете сделать что-то вроде этого:

<html>
  <head>
    <script type="text/javascript">

      function activateTab(pageId) {
          var tabCtrl = document.getElementById('tabCtrl');
          var pageToActivate = document.getElementById(pageId);
          for (var i = 0; i < tabCtrl.childNodes.length; i++) {
              var node = tabCtrl.childNodes[i];
              if (node.nodeType == 1) { /* Element */
                  node.style.display = (node == pageToActivate) ? 'block' : 'none';
              }
          }
      }

    </script>
  </head>
  <body>
    <ul>
      <li>
        <a href="javascript:activateTab('page1')">Tab 1</a>
      </li>
      <li>
        <a href="javascript:activateTab('page2')">Tab 2</a>
      </li>
      ...
    </ul>
    <div id="tabCtrl">
      <div id="page1" style="display: block;">Page 1</div>
      <div id="page2" style="display: none;">Page 2</div>
      ...
    </div>
  </body>
</html>

Ответ 3

TabTastic - хороший путеводитель; он доступен и (когда JavaScript недоступен) терпит неудачу очень изящно.

Ответ 4

Если вы хотите реализовать собственное представление табуляции, просто сделайте следующее:

<html>
    <head>
        <style>
            .tab {
            display:none;
            }
        </style>

        <script type="text/javascript">
          function initTabView(){
            var x = document.getElementsByClassName('tab-view')
            for(var i=0; i < x.length; i++) {
              x[i].onclick = displayTab;
            }

            var prevViewedTab = null;

            function displayTab(e) {
            var idOfTabToDisplay = this.getAttribute("data-tab")

            if(prevViewedTab) {
              prevViewedTab.style.display = 'none';
            }

            var tabToDisplay = document.getElementById(idOfTabToDisplay);
              tabToDisplay.style.display = 'block';
              prevViewedTab = tabToDisplay;
            }

            var defaultTab = document.getElementsByClassName('default-tab')
              if (defaultTab.length) {
                defaultTab[0].style.display = 'block';
                prevViewedTab = defaultTab[0];
              }
          }
        </script>
    </head>

    <body>
        <ul>
            <li>
                <a data-tab="tab1" class="tab-view">Tab 1</a>
            </li>
            <li>
                <a data-tab="tab2" class="tab-view">Tab 2</a>
            </li>
            <li>
                <a data-tab="tab3" class="tab-view">Tab 3</a>
            </li>
            <li>
                <a data-tab="tab4" class="tab-view">Tab 4</a>
            </li>
        </ul>
        <div id="tabCtrl">
            <div class="tab default-tab" id="tab1">This is Tab 1</div>
            <div class="tab" id="tab2">This is Tab 2</div>
            <div class="tab" id="tab3">This is Tab 3</div>
            <div class="tab" id="tab4">This is Tab 4</div>
        </div>

        <script>
            initTabView();
        </script>
    </body>
</html>

A jsFiddle доступен здесь.

Ответ 5

Взгляните на пример, например this (любезно предоставлен поиском Google для просмотра с вкладками javascript).

Очевидно, вы можете использовать это с небольшой настройкой, но поучительно разобрать его и определить, что он делает. Он в основном включает или отключает <div> с помощью стиля display и устанавливает его на block или none

Ответ 6

Виджет вкладок в jQuery UI прост в использовании: http://jqueryui.com/demos/tabs/.

Виджет вкладки jQuery полностью работает со стороны браузера - содержимое для всех вкладок отправляется по каждому запросу или вы можете написать код JavaScript, который использует Ajax для динамического загрузки содержимого вкладки.

Но это не подходит для вашего использования. Подумайте, нужно ли управлять вкладками на стороне сервера (то есть щелчок на вкладке отправляет новый запрос страницы на сервер - сервер строит HTML, который имеет визуальный внешний вид вкладок).

Ответ 7

Если вы открыты для использования JavaScript, вкладка jQuery довольно хорошо.

Ответ 8

Если "простые и совместимые" являются вашими двумя критериями, я бы предложил плагин jQuery UI Tabs. Кросс-браузер и встроенный cinch.

Ответ 9

В зависимости от ваших амбиций это может быть просто неупорядоченный список и количество <div> (содержимое вкладки). Тогда простой JavaScript мог бы - с помощью getElementById() - установить свойство отображения для всех <div> s: none для всех, кроме текущего.

В качестве альтернативы вы можете посмотреть это.

Изменить: не единственный, ссылающийся на сайт jQuery, кажется:)