標籤導航

Question

下面是我的代碼：

<div id="container"> 
    <!-- Start Tabs !--> 
    <div class="tab-container">  
     <div id="c1"> 
      <a href="#c1" title="Projects">Companies</a> <!-- This is your actual tab and the content is below it !--> 
      <div class="tab-content"> <!-- tab-container > div > div in the CSS !--> 
       <header id="companies"> 
        <h3>&nbsp;&nbsp;Companies(5)</h3>  
       </header> 
       <button id="create" onclick="addRow()">Create</button> 

       <button id="edit">Edit</button> 
       <div id="table"> 
        <table id="col"> 
         <tr ><th>Company1</th></tr> 
         <tr><th>Comapny2</th></tr> 
         <tr><th>Company3</th></tr> 
         <tr><th>Company4</th></tr> 
         <tr><th>Company5</th></tr> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>  

我已經給CSS3的造型這些標籤。現在我想將這些行也作爲製表符mena垂直製表符，以便當我單擊它時，它應該顯示一些數據。任何人都可以幫助我，我想這樣只能使用html5，css3或jquery。

下面是我現有的CSS。

<style> 
    p, .tab-content li, h1, h2, h3{ /* This insures that there's enough space between your paragraphs, headings, etc */ 
     margin-bottom: 10px; 
    } 
    a{ 
     text-decoration:none; 
     color:black; 
    } 

    .tab-container { 
     position: relative; 
     width: 100%; 
     z-index:0; 
     color:black; 
     font-size:20px; 
     border-style:solid; 
     border-color:#FFFFFF; 

    } 
    #container{ /* Use this to position the entire tab module */ 

     width:1000px; 
     margin-top:20px; 




    } 

    .tab-container > div { 
     display:inline; 
    } 

    .tab-container > div > a { 
     position:relative; 
    /* Keeps the tabs in line with each other */ 
     text-decoration: none; 
     color: black; 
     display: inline-block; 
     padding: 4px 14px; 
     font-size:15px; 
     font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; 
     font-weight:normal; 
     margin-top:2px; 
     background: #E5E4E2; /* old browsers */ 
     width:70px; 
     height:40px; 
     border-style:solid; 
     border-color:#D1D0CE; 
    } 

    .tab-container > div > a:hover { 
     /* background: none repeat scroll 0 0 #948a81; */ 
     background: #B6B6B4; 
    } 

    .tab-container > div > div{ /* This is the container which holds the tab content */ 

     background-color:#FFFFFF; 
     z-index:0; 
     top: 75px; 
     padding:0px 5px 15px 20px; 
     min-height:500px; 
     position:absolute; /* Fixes IE 7 & 8 */ 
     outline-offset: -8px; 

    } 

    .tab-container > div:target > div { 
     position: absolute; 
     z-index: 3 !important; /* Brings the content to the front depending on the tab that was clicked */ 
    } 




    /****** This imports other stylesheets so you don't have to call them in an html file *****/ 
    @import url('../../reset.css'); 
    div.tab-content{  
      width:1000px; 
     margin-top:20px; 
     display:table; 
    } 

    button{ 


     padding: 4px 14px; 

     background: #E5E4E2; /* old browsers */ 
     width: 80px; 
     height: 30px; 
     border-style:solid; 
     border-color:#D1D0CE; 
     margin-top:20px; 
    } 





    button:hover{ 
    background: #B6B6B4; 

    } 
    #table tr>th{ 

     float:left; 
     background-color:#EFECE5; 
     layout-grid:vertical-ideographic; 
     padding:50; 
     margin-left:0px; 
     height:50px; 
     margin-top:20px; 
     width:300px; 
     border-color:#E5E4E2; 
     text-align:left; 
     border-width:2px; 
     border-style: solid; 
    } 

    #table tr>th:hover{ 

    background: #B6B6B4; 

    } 
    </style> 

Answer 1

如果你想顯示這些標籤的一些數據使用：

$(document).ready(function() { 
$("#tabid").click(function() { 
    $("#tabdata").show(); 
)} 
)} 

這樣，您就可以顯示每個標籤的數據。點擊。
注意點擊不是唯一的功能，你也可以設置懸停對象。在選項卡上懸停時更改數據。
你可以隱藏一個div，並顯示其他！多數民衆贊成在jQuery如何做到這一點。否則，如果你想在頁面加載後加載數據。使用jQuery AJax作爲：

$.ajax({ 
// here should be the ajax properties, such as page name data to load and 
on success, on fail, on error. 
})