如何在 HTML 中制作选项卡式视图？

Posted 2023-03-22

技术标签:

【中文标题】如何在 HTML 中制作选项卡式视图？【英文标题】：How do I make a tabbed view in HTML? 【发布时间】：2009-06-22 14:53:22 【问题描述】：

单击选项卡 A 时，显示选项卡 A 的内容。单击选项卡 B，显示选项卡 B 的内容，依此类推。

构建 html sn-p 最简单和兼容的方法是什么？

我不是要在这里使用任何库，所以没有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>

【讨论】：

谢谢，好像9,1,3都是nodeType的可能值吧？根据w3.org/TR/2000/WD-DOM-Level-1-20000929/…，有12种可能。检查 1 主要是让我们无法获取可能属于标签页 div 的属性和文本节点。【参考方案2】：

这里是 list of different types of tabs 以及如何构建它们的教程

【讨论】：

【参考方案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>

jsFiddle 可用 here。

【讨论】：

【参考方案5】：

看一个示例，例如this（由 Google 搜索“标签式视图 javascript”提供）。

您显然可以通过一些自定义来使用它，但是将它拆开并确定它在做什么是有益的。它基本上是使用display 样式启用或禁用<div> 并将其设置为block 或none

【讨论】：

【参考方案6】：

如果“简单且兼容”是您仅有的两个标准，我建议您使用jQuery UI Tabs plugin。跨浏览器，轻松实现。

【讨论】：

我需要在没有任何库的情况下实现它:(【参考方案7】：

根据您的野心，这可能只是一个无序列表和多个<div>s（标签内容）的问题。然后一个简单的 JavaScript 可以 - 通过 getElementById() - 设置所有 <div>s 的显示属性：none 为除当前之外的所有。

或者，您可以查看this。