jQuery如何实现tab选项卡效果:
选项卡功能在众多网站都在应用，不但美观，而且也可以优化网站布局，能够以最少的空间为浏览器提供尽可能多的内容，而且便于切换，以前此种功能都是利用js代码写的，下面就来介绍一下利用jQuery实现选项卡功能。
代码实例如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">body, ul, li { margin: 0; padding: 0; list-style: none;}#tabbox { width: 600px; overflow: hidden; margin: 0 auto;}.tab_conbox { border: 1px solid #999; border-top: none;}.tab_con { display: none;}.tabs { height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%;}.tabs li { height: 31px; line-height: 31px; float: left; border: 1px solid #999; border-left: none; margin-bottom: -1px; background: #e0e0e0; overflow: hidden; position: relative;} .tabs li a { display: block; padding: 0 20px; border: 1px solid #fff; text-decoration: none; outline: none;}.tabs li a:hover { background: #ccc;}.tabs .thistab, .tabs .thistab a:hover { background: #fff; border-bottom: 1px solid #fff;}.tab_con { padding: 12px; font-size: 14px; line-height: 175%;}</style><script type="text/javascript" src='/images/loading.gif' data-original="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function () { jQuery.jqtab = function (tabtit, tab_conbox, shijian) { $(tab_conbox).find("li").hide(); $(tabtit).find("li:first").addClass("thistab"); $(tab_conbox).find("li:first").show(); $(tabtit).find("li").bind(shijian, function () { $(this).addClass("thistab").siblings("li").removeClass("thistab"); var activeindex = $(tabtit).find("li").index(this); $(tab_conbox).children().eq(activeindex).show().siblings().hide(); return false; }); }; $.jqtab("#tabs", "#tab_conbox", "click");});</script></head><body> <div id="tabbox"> <ul class="tabs" id="tabs"> <li><a href="#">div+css</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">JSON</a></li> <li><a href="#">搜索优化</a></li> </ul> <ul class="tab_conbox" id="tab_conbox"> <li class="tab_con"> <p>div+css</p> </li> <li class="tab_con"> <p>jQuery</p> </li> <li class="tab_con"> <p>JSON</p> </li> <li class="tab_con"> <p>搜索优化</p> </li> </ul> </div></body></html>
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=5807
更多内容可以参阅:http://www.softwhy.com/jquery/
原标题：jQuery如何实现tab选项卡效果
关键词：jquery
我知道了 