javascript - 使用 html5 或 jquery 的标签导航

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.
})