tabs jquery.tools

需要导入jquery.tools.min.js库和jQuery库

$(function() { 
    // setup ul.tabs to work as tabs for each div directly under div.panes 
   $("ul.tabs").tabs("div.panes > div", { initialIndex: 1 });//设置
});

div+css:

 <div class="box">

<!-- the tabs -->

<ul class="tabs">

<li>

<a href="#first">本地书库</a>

</li>

<li>

<a href="#second">天猫书库</a>

</li>

</ul>

<!-- tab "panes" -->

<div class="panes">

<div>

<!--第一个tab-->

<!--<a href="#second">open third tab</a>-->

</div>

<div> 

<!--第二个tab-->

<!--<a href="#first">anchor links</a>-->

</div>

</div>

</div>

css:

.box {

background-color: #fcfcfc;

display: block;

zoom: 1;

padding-bottom: 12px;

}

/* root element for tabs  */

 

ul.tabs {

list-style: none;

margin: 0 0 5px 0 !important;

padding:0;

border-bottom: 1px solid #666;

height: 30px;

}

ul {

line-height: 20px;

}

/* single tab */

 

ul.tabs li {

float: left;

text-indent: 0;

padding: 0;

margin: 0 !important;

list-style-image: none !important;

}

/* link inside the tab. uses a background image */

 

ul.tabs a {

background: url(../images/blue.png) no-repeat -420px 0;

font-size: 11px;

display: block;

height: 30px;

line-height: 30px;

width: 134px;

text-align: center;

text-decoration: none;

color: #333;

padding: 0px;

margin: 0px;

position: relative;

top: 1px;

}

ul.tabs a:active {

outline: none;

}

/* when mouse enters the tab move the background image */

 

ul.tabs a:hover {

background-position: -420px -31px;

color: #fff;

}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */

 

ul.tabs a.current,

ul.tabs a.current:hover,

ul.tabs li.current a {

background-position: -420px -62px;

cursor: default !important;

color: #000 !important;

}