Как сделать представление с вкладками в HTML? - PullRequest
Новая
       26

Как сделать представление с вкладками в HTML?

15 голосов
/ 22 июня 2009

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

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

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

Ответы [ 9 ]

29 голосов
/ 23 июня 2009

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

<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 голосов
/ 22 июня 2009

Вот список различных типов вкладок плюс учебники по их созданию

2 голосов
/ 14 августа 2013

Если вы хотите реализовать свой собственный вид вкладок, просто сделайте это так: 

<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 доступно здесь .

2 голосов
/ 22 июня 2009

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

1 голос
/ 22 июня 2009

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

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

0 голосов
/ 22 июня 2009

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

Кроме того, вы можете взглянуть на this .

Редактировать : похоже, не единственная ссылка на сайт jQuery:)

0 голосов
/ 22 июня 2009

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

0 голосов
/ 22 июня 2009

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

0 голосов
/ 22 июня 2009

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

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

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

...