jQuery TOOLS库快速实现点击TAB切换效果

下载jquery.tools.min.js库：http://pan.baidu.com/s/1jGp5y8e

引用jquery.tools.min.js：

<script type="text/javascript" src="jquery.tools.min.js"></script>

JavaScript代码：

<script type="text/javascript">
// perform JavaScript after the document is scriptable.
$(function() {
    // setup ul.tabs to work as tabs for each div directly under div.panes
    $("ul.tabs").tabs("div.panes > div");
});
</script>

HTML代码：

<!-- the tabs -->
<ul class="tabs">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Tab 2</a></li>
	<li><a href="#">Tab 3</a></li>
</ul> 
<!-- tab "panes" -->
<div class="panes">
	<div>First tab content. Tab contents are called "panes"</div>
	<div>Second tab content</div>
	<div>Third tab content</div>
</div>

css代码：

/* root element for tabs  */
ul.tabs {border: 1px solid #746551;background-color: #EFE8CE;height: 30px;line-height: 30px;font-size: 14px;color: #5C4527;padding: 0px 10px;}
/* single tab */
ul.tabs li { float:left; text-indent:0; padding:0;margin:0 !important; list-style-image:none !important;}
ul.tabs a {font-size:12px;display:block; height: 30px;line-height:30px;  width: 134px; text-align:center; color:#333; position:relative;}
ul.tabs a:active {outline:none;}
ul.tabs a:hover {background: #8A6837; color:#fff;}
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {background: #8A6837; cursor:default !important;color:#fff !important;}
ul.tabs a.s {width:81px; }
.panes .pane {display:none;}
/* tab pane styling */
.panes div {display:none; font-size:14px; background-color:#fff; padding:15px 10px;}

CSS代码根据需要修改