tab

普通tab

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

html

?

1 2 3 4 5 6 7 8 9 10

<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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

.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

?

1 2 3

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