How do I make a tabbed view in HTML?

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

I don't mean to use any libraries here, so none of jQuery or any other libraries.

标签： html tabbed-view

9条回答

2楼-- · 2020-06-08 13:48

If "simple and compatible" are your only two criteria, I'd suggest the jQuery UI Tabs plugin. Cross-browser, and a cinch to implement.

0人赞添加讨论(0) 举报

闹够了就滚

3楼-- · 2020-06-08 13:54

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) 举报

不美不萌又怎样

4楼-- · 2020-06-08 13:55

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) 举报

对你真心纯属浪费

5楼-- · 2020-06-08 14:01

If you're open to using JavaScript, jQuery's tab is pretty nice.

0人赞添加讨论(0) 举报

ゆ、 Hurt°

6楼-- · 2020-06-08 14:02

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) 举报

虎瘦雄心在

7楼-- · 2020-06-08 14:02

The tabs widget in jQuery UI is easy to use: http://jqueryui.com/demos/tabs/.

The jQuery tabs widget works completely on the browser side - content for all tabs are sent on every request, or you could write JavaScript code that uses Ajax to load the tab contents dynamically.

But it might not be appropriate for your use. Consider if you need to control the tabs server-side (that is, a click on a tab sends a new page request to the server - the server constructs HTML that has the visual appearance of tabs).

0人赞添加讨论(0) 举报

1 2 下一页

How do I make a tabbed view in HTML?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间