如何在HTML/CSS/JavaScript中製作多級標籤式窗格？

我想爲我的PHP前端製作多級標籤式窗格。如何在HTML/CSS/JavaScript中製作多級標籤式窗格？

我要實現的是這樣的：

_______|TAB1||Tab2||Tab3|________________________________
___________|SUB TAB1||Sub Tab2|_____________________
| Content of Sub Tab 1 of Tab1 |
| Content of Sub Tab 1 of Tab1 |
| Content of Sub Tab 1 of Tab1 |
| Content of Sub Tab 1 of Tab1 |

同樣，當我點擊TAB1的子TAB2它應該顯示其內容。現在當我點擊Tab 2時，它應該默認顯示其子標籤11 &的內容，當我點擊Tab2的SubTab2時，它應該顯示它的內容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
     <head><title>Tab-View Sample</title> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
     <meta name="description" content="" /> 
     <meta name="keywords" content="" /> 
     <link rel="stylesheet" type="text/css" href="tab-view.css" /> 
    </head> 

    <body> 
     <?php $id = isset($_GET['id']) ? $_GET['id'] : 1; 
      $ida = isset($_GET['ida']) ? $_GET['ida'] : 11; 
     ?> 
     <div class="TabView" id="TabView"> 
      <!-- ***** Tabs ************************************************************ --> 
      <div class="Tabs" style="width: 452px;"> 
       <a <?=($id == 1) ? 'class="Current"' : 'href="sample.php?id=1"';?>>Tab 1</a> 
       <a <?=($id == 2) ? 'class="Current"' : 'href="sample.php?id=2"';?>>Tab 2</a> 
       <a <?=($id == 3) ? 'class="Current"' : 'href="sample.php?id=3"';?>>Tab 3</a> 
      </div> 

      <!-- ***** Pages *********************************************************** --> 
      <div class="Pages"> 
       <div class="Page" style="display: <?=($id == 1 && $ida == 11) ? 'block' : 'none';?>"> 
        <div class="Pad"> 
         <div class="Tabs" style="width: 452px;"> 
          <a <?=($ida == 11) ? 'class="Current"' : 'href="sample.php?id=1&ida=11"';?>>Tab 1</a> 
          <a <?=($ida == 12) ? 'class="Current"' : 'href="sample.php?id=1&ida=12"';?>>Tab 2</a> 
         </div> 

         <div class="Pages"> 
          <div class="Page" style="display: <?=($ida == 11) ? 'block' : 'none';?>"> 
           <div class="Pad"> 
            Hello World Tab 11!!! 
           </div> 
          </div> 
         </div> 
         <div class="Pages"> 
          <div class="Page" style="display: <?=($ida == 12) ? 'block' : 'none';?>"> 
           <div class="Pad"> 
            Hello World Tab 12!!! 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 

       <div class="Page" style="display: <?=($id == 2) ? 'block' : 'none';?>"> 
        <div class="Pad"> 
         <? odbc_result_all($cur,"border=1"); ?> 
        </div> 
       </div> 

       <div class="Page" style="display: <?=($id == 3) ? 'block' : 'none';?>"> 
        <div class="Pad"> 
         <? 
         foreach($arr as $val) 
         { 
          echo($val.'<br>'); 
         } 
         ?> 
        </div> 
       </div> 
      </div> 

      <div class="footer">Copyright 1999-2005 by Refsnes Data.</div> 
     </div> 


     <div class="TabView1" id="TabView1"> 
      <!-- ***** Tabs ************************************************************ --> 
      <div class="Tabs" style="width: 452px;"> 
       <a <?=($id == 4) ? 'class="Current"' : 'href="sample.php?id=4"';?>>Tab 4</a> 
       <a <?=($id == 5) ? 'class="Current"' : 'href="sample.php?id=5"';?>>Tab 5</a> 
       <a <?=($id == 6) ? 'class="Current"' : 'href="sample.php?id=6"';?>>Tab 6</a> 
      </div> 

      <!-- ***** Pages *********************************************************** --> 
      <div class="Pages"> 
       <div class="Page" style="display: <?=($id == 4) ? 'block' : 'none';?>"> 
        <div class="Pad"> 
         Hello India!!! 
        </div> 
       </div> 

       <div class="Page" style="display: <?=($id == 5) ? 'block' : 'none';?>"> 
        <div class="Pad"> 
         <? odbc_result_all($cur,"border=1"); ?> 
        </div> 
       </div> 

       <div class="Page" style="display: <?=($id == 6) ? 'block' : 'none';?>"> 
        <div class="Pad"> 
         <? 
         foreach($arr as $val) 
         { 
          echo($val.'<br>'); 
         } 
         ?> 
        </div> 
       </div> 
      </div> 

      <div class="footer">Copyright 1999-2005 by Refsnes Data.</div> 
     </div> 

     <script type="text/javascript" src="tab-view.js"></script> 
     <script type="text/javascript"> 
      tabview_initialize('TabView'); 
      tabview_initialize('TabView1'); 
     </script> 
    </body> 
</html>

我想通過此代碼實現多級標籤。這是正確顯示，但是當我點擊子選項卡之一，它提供了一個錯誤：

"Object not found"

來源

2011-07-12 Viral Jain

http://flowplayer.org/tools/tabs/index.html

最後我用這個庫文件讓我的工作做好。

謝謝大家的意見，回覆&意見。 :)

來源

2011-10-13 19:21:02

舉個簡單的例子，你可以使用< A HREF =「JavaScript的:;」 onclick =「show（1）」>，其中1是每個選項卡的選項卡編號。

然後作出特別命名的標記的部分：

<div id="div1">section 1</div> 
<div id="div2">section 2</div> 
...

和腳本來更改可視性：

function show(number) { 
    document.getElementById("div2").style.display='none' 
    document.getElementById("div2").style.display='none' 
    ... 
    document.getElementById("div"+number).style.display='block' 
}

你應該能夠做到爲分節標籤一樣，自隱藏元素的子元素被隱藏。

來源

2011-07-12 07:39:49 NoBugs

如何在HTML/CSS/JavaScript中製作多級標籤式窗格？

回答

相關問題