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

Question

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

htmltabbed-view

17

当点击选项卡A时，显示选项卡A的内容。点击选项卡B，显示选项卡B的内容，以此类推。

构建HTML片段的最简单和兼容的方式是什么？

我不是指在这里使用任何库，因此不使用jQuery或其他任何库。

- omg

9个回答

3

如果您想实现自己的选项卡视图，只需按照以下方式进行操作：

<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，可以在这里找到链接。

- naren

3

这里是一个包含不同类型标签页的列表，以及如何构建它们的教程。

- Lark

3

TabTastic是一个很好的指南——它易于访问，并且（当JavaScript不可用时）非常优雅地失败。

- Quentin

1

以this为例（由Google搜索“tabbed view javascript”提供）。

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

- Brian Agnew

0

jQuery UI中的选项卡小部件非常易于使用：http://jqueryui.com/demos/tabs/。

jQuery选项卡小部件完全在浏览器端工作 - 所有选项卡的内容都在每个请求中发送，或者您可以编写使用Ajax动态加载选项卡内容的JavaScript代码。

但它可能不适合您的使用。请考虑是否需要在服务器端控制选项卡（即，单击选项卡会向服务器发送新页面请求 - 服务器构造具有选项卡视觉外观的HTML）。

- codeape

我需要在没有任何库的情况下实现它：( - omg

0

如果你愿意使用JavaScript，jQuery的选项卡非常不错。

- Shane Fulmer

1

链接已损坏。 - Peter Mortensen

0

如果"简单和兼容"是你唯一的两个标准，我建议使用jQuery UI Tabs插件。跨浏览器，实现起来非常简单。

- Mark Hurd

我需要在没有任何库的情况下实现它：( - omg

0

根据您的野心，这可能只是一个无序列表和一些

（选项卡内容）的问题。然后，通过getElementById()，一个简单的JavaScript可以设置所有

的显示属性：除了当前的

外，其他都为none。

或者，您可以查看this。

编辑：似乎不是唯一链接到jQuery网站的人 :)

- jensgram

我需要在没有任何库的情况下实现它：( - omg

在这种情况下，Jacob的解决方案简洁明了。 - jensgram

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jacob · Accepted Answer

如果你想自己制作选项卡控件，你可以尝试以下方法：

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