发表新帖
发表新帖

How do I make a tabbed view in HTML?

后端 未结
关注
9 1710
佛祖请我去吃肉
佛祖请我去吃肉 2021-02-13 05:20

When clicking on tab A, show content for tab A. Click on tab B, show content for tab B, and so on.

What\'s the most simple and compatible way of constructing a HTML snip

相关标签:
9条回答
  • 慢半拍i
    2021-02-13 06:04

    If you want to roll your own tab control, you could do something like this:

    <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>
    0 讨论(0)
  • 执笔经年
    2021-02-13 06:05

    If you want to implement your own tab view, just do it like this:

    <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 is available here.

    0 讨论(0)
  • 失恋的感觉
    2021-02-13 06:06

    Depending on your ambitions, it could simply be a matter of an unordered list and a number of <div>s (tab contents). Then a simple JavaScript could - by means of getElementById() - set the display property for all the <div>s: none for all except the current.

    Alternatively, you could have a look at this.

    Edit: Not the only one linking to the jQuery site, it seems :)

    0 讨论(0)
 看不清?
提交回复
热议问题