现在网上好多滑动选项卡的代码，但想要找到代码简洁的滑动效果的话，也不是很好找哦，下面给大家说一下：jquery插件调用方法："#tabs",".tab_con" 这里的#tabs是jquery选项卡的链接按钮的外层ID，.tab_con是要显示的的内容类名。只要注意这两个地方调用就不会错。在一个网页中可以调用多个选项卡效果，而不用过多的代码冗余。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>代码简洁的滑动门（tab）jquery插件 - 51网络科技</title>
<meta name="keywords" content="jquery特效,JS代码,js特效代码大全,导航菜单代码,焦点幻灯片,企业网页设计欣赏" />
<meta name="description" content="51网络科技专业提供香港免备案空间、美国免备案空间、香港服务器、香港vps等网站建设必备的网络材料" />
<style type="text/css">
#tabbox{ width:600px; overflow:hidden; margin:0 auto;}
.tab_conbox{border: 1px solid #999;border-top: none;}
.tab_con{ display:none;}
body,ul,li{margin: 0;padding: 0;font: 12px normal "宋体", Arial, Helvetica, sans-serif;list-style: none;}
a{text-decoration: none;color: #000;font-size: 14px;}
.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;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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.jqtab = function(tabtit,tabcon) {
$(tabcon).hide();
$(tabtit+" li:first").addClass("thistab").show();
$(tabcon+":first").show();
$(tabtit+" li").click(function() {
$(tabtit+" li").removeClass("thistab");
$(this).addClass("thistab");
$(tabcon).hide();
var activeTab = $(this).find("a").attr("tab");
$("#"+activeTab).fadeIn();
return false;
});
};
/*调用方法如下：*/
$.jqtab("#tabs",".tab_con");
});
</script>
</head>
<body>
<div id="tabbox">
<ul class="tabs" id="tabs">
<li><a href="/hk.html" tab="tab1">香港空间</a></li>
<li><a href="/usa.html" tab="tab2">美国空间</a></li>
<li><a href="/china.html" tab="tab3">国内空间</a></li>
<li><a href="/tz.html" tab="tab4">防御空间</a></li>
</ul>
<ul class="tab_conbox">
<li id="tab1" class="tab_con">
<p><span><a href="/">51网络科技</a>为用户提供香港免备案空间</span></p>
</li>
<li id="tab2" class="tab_con">
<p><span><a href="/">51网络科技</a>为用户提供美国空间，也有美国月付免备案空间</span></p>
</li>
<li id="tab3" class="tab_con">
<p><span><a href="/">51网络科技</a>为用户提供国内空间，国内免备案虚拟主机等</span></p>
</li>
<li id="tab4" class="tab_con">
<p><span><a href="/">51网络科技</a>为用户提供电影空间、淘宝客空间等特种空间</span></p>
</li>
</ul>
</div>
<p>代码简洁的滑动门（tab）jquery插件调用方法："#tabs",".tab_con" 这里的#tabs是jquery选项卡的链接按钮的外层ID，.tab_con是要显示的的内容类名。只要注意这两个地方调用就不会错。一个页面可以多次使用。
</p>
</body>
</html>
169免备案主机，即开即用！