如何在HTML中製作選項卡式視圖？

單擊標籤A時，顯示標籤A的內容。單擊標籤B，顯示標籤B的內容等等。如何在HTML中製作選項卡式視圖？

什麼是構建HTML片段的最簡單和兼容的方式？

我不是故意在這裏使用任何庫，所以沒有jQuery或任何其他庫。

2009-06-22 omg

如果你想推出自己的標籤控制，你可以做這樣的事情：

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

來源

2009-06-22 20:31:20 Jacob

jQuery UI中的選項卡小部件易於使用：http://jqueryui.com/demos/tabs/。

jQuery選項卡小部件完全在瀏覽器端工作 - 所有選項卡的內容都會在每個請求上發送，或者您可以編寫使用Ajax動態加載選項卡內容的JavaScript代碼。

但它可能不適合您的使用。考慮是否需要控制服務器端的選項卡（也就是說，在選項卡上單擊將向服務器發送一個新的頁面請求 - 服務器構建具有選項卡可視外觀的HTML）。

來源

2009-06-22 14:57:33 codeape

我需要實現它沒有任何庫:( – omg 2009-06-22 18:32:57

如果您願意使用JavaScript，jQuery's tab是相當不錯的。

來源

2009-06-22 14:57:56

的鏈接斷開。 – 2016-06-12 12:53:45

看一個例子，如this（禮貌谷歌搜索「標籤視圖javascript」）。

你可以明顯地使用它來進行一些自定義，但將它分開並確定它在做什麼是有益的。它基本上是啓用或使用該display風格禁用<div>並將其設置爲block或none

來源

2009-06-22 14:58:03

如果「簡單和兼容」是你唯一兩個標準，我建議的jQuery UI Tabs plugin。跨瀏覽器，並執行。

來源

2009-06-22 14:58:14

我需要實現它沒有任何庫:( – omg 2009-06-22 18:33:35

根據你的野心，它可能只是一個無序列表和一些<div>（標籤內容）的問題。然後，一個簡單的JavaScript可以 - 通過getElementById() - 爲除當前以外的所有人設置所有<div> s：none的顯示屬性。您也可以看看this。

編輯：不是唯一的一個鏈接到jQuery的網站，它似乎:)

來源

2009-06-22 14:58:48 jensgram

我需要實現它沒有任何庫:( – omg 2009-06-22 18:34:12

在這種情況下，雅各的解決方案是整齊簡單 – jensgram 2009-06-23 05:39:05

這裏是一個list of different types of tabs以及如何構建他們

來源

2009-06-22 14:59:50 Lark

TabTastic教程是一個很好的指導—它是可訪問的，並且（當JavaScript不可用時）非常優雅地失敗。

來源

2009-06-22 16:04:28 Quentin

無法打開，em？ – omg 2009-06-22 18:11:57

如果你想實現自己的標籤視圖，只需像這樣做：

<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可用here。

來源

2013-08-14 06:39:13 naren

如何在HTML中製作選項卡式視圖？

回答

相關問題