普通tab

引入  jquery.js  和  tabs.js（可在文件中下载）

html

<div class='tabs' id="tabs">
  <ul class='horizontal'>
    <li rel="tab-1">tab1</li>
    <li rel="tab-2" class="selectActive">tab2</li>
    <li rel="tab-3">tab3</li>
  </ul>
  <div rel='tab-1'><span>Tab 1</span></div>
  <div rel='tab-2'><span>Tab 2</span></div>
  <div rel='tab-3'><span>Tab 3</span></div>
</div>

css

.tabs div{
    display: none;
    clear: both;
    border: solid 2px #0099FF;
    min-height: 500px;
}
.tabs .horizontal{
    margin: 0px;
    padding: 0px;
}
.tabs .horizontal li{
    float: left;
    list-style: none;
    height: 50px;
    line-height: 50px;
    background-color: #DDDDDD;
    width:150px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
}
.tabs .horizontal li:not(:first-child){
    margin-left: 5px;
}

.tabs .horizontal li.selectActive{
    border-bottom: solid 2px #0099FF;
    background-color: #0099FF;
    color: white;
}

 JS

<script type="text/javascript">
    tabs_takes.init("tabs");
</script>