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

StackOverflow https://stackoverflow.com/questions/1027663

  •  06-07-2019
  •  | 
  •  

Вопрос

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

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

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

Это было полезно?

Решение

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

<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>

Другие советы

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

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

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

<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>

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

Посмотрите на пример, например этот (любезно предоставлен Поиск в Google для «JavaScript с вкладками».

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

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

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

Кроме того, вы можете посмотреть это .

Изменить . Похоже, это не единственная ссылка на сайт jQuery:)

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top