Javascript 使用html5或jquery的选项卡导航

下面是我的代码：

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

公司（5）
创造
编辑
公司1
Comapny2
公司3
公司4
公司5

我已经为这些选项卡提供了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>

p、 .tab内容li、h1、h2、h3{/*这确保段落、标题等之间有足够的空间*/
边缘底部：10px；
}
a{
文字装饰：无；
颜色：黑色；
}
.tab容器{
位置：相对位置；
宽度：100%；
z指数：0；
颜色：黑色；
字体大小：20px；
边框样式：实心；
边框颜色：#FFFFFF；
}
#容器{/*用于定位整个选项卡模块*/
宽度：1000px；
边缘顶部：20px；
}
.tab容器>div{
显示：内联；
} 
.tab容器>分区>a{
位置：相对位置；
/*使选项卡彼此对齐*/
文字装饰：无；
颜色：黑色；
显示：内联块；
填充：4px14px；
字体大小：15px；
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
字体大小：正常；
边缘顶部：2倍；
背景：#E5E4E2；/*旧浏览器*/
宽度：70px；
高度：40px；
边框样式：实心；
边框颜色：#D1D0CE；
}
.tab容器>分区>a:悬停{
/*背景：无重复滚动0 0#948a81*/
背景#b6b4；
}
.tab container>div>div{/*这是保存选项卡内容的容器*/
背景色：#FFFFFF；
z指数：0；
顶部：75px；
填充：0px 5px 15px 20px；
最小高度：500px；
位置：绝对；/*固定IE 7和8*/
轮廓偏移：-8px；
}
.tab容器>分区：目标>分区{
位置：绝对位置；
z-index:3！重要；/*根据单击的选项卡将内容置于最前面*/
}
/******这将导入其他样式表，因此您不必在html文件中调用它们*****/
@导入url（'../../reset.css'）；
div.tab-content{
宽度：1000px；
边缘顶部：20px；
显示：表格；
}
钮扣{
填充：4px14px；
背景：#E5E4E2；/*旧浏览器*/
宽度：80px；
高度：30px；
边框样式：实心；
边框颜色：#D1D0CE；
边缘顶部：20px；
}
按钮：悬停{
背景#b6b4；
}
#表tr>th{
浮动：左；
背景色：#EFECE5；
布局网格：垂直表意；
填充：50；
左边距：0px；
高度：50px；
边缘顶部：20px；
宽度：300px；
边框颜色：#E5E4E2；
文本对齐：左对齐；
边框宽度：2倍；
边框样式：实心；
}
#表tr>th：悬停{
背景#b6b4；
}

如果要显示这些选项卡中的某些数据，请使用：

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

这样，您可以显示每个选项卡中的数据。点击按钮。
注意单击不是唯一的功能，您也可以设置悬停对象。将鼠标悬停在选项卡上时更改数据。
您可以隐藏一个div，然后显示另一个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.
})

---

@jerone你能给我演示一下吗