简单实用的jquery鼠标滑过tab选项卡 tab切换选项卡
一个简单实用jquery tab选项卡,鼠标滑过切换,找了很久这种代码简单的,其他的写得都比较复杂,代码比较多:
HTML代码部分:
<div class="tabbox" id="statetab"> <ul class="tabbtn"> <li class="current"><a href="">php900</a></li> <li><a href="#">分享一</a></li> <li><a href="#">分享二</a></li> <li><a href="#">分享三</a></li> </ul><!--tabbtn end--> <div class="tabcon"> 内容一<br /> <strong>内容一</strong> <br />内容一 </div><!--tabcon end--> <div class="tabcon"> 内容二 </div><!--tabcon end--> <div class="tabcon"> 内容三 </div><!--tabcon end--> <div class="tabcon"> 内容四 </div><!--tabcon end--> </div><!--tabbox end-->CSS代码部分:
/* tabbox */ .tabbox{width:488px;margin:20px auto;position:relative;height:328px;overflow:hidden;} .tabbox .tabbtn{ height:44px; background:url(images/01.png) repeat-x; border-left:solid 1px #ddd; border-right:solid 1px #ddd; padding-left:23px;} .tabbox ul{ padding-top:8px;} .tabbox .tabbtn li{float:left;position:relative;margin:0 0 0 -1px;} .tabbox .tabbtn li a {display:block;float:left;height:30px;line-height:30px;overflow:hidden;width:105px;text-align:center;font-size:12px;cursor:pointer; font-size:14px; color:#4f4f4f;font-weight:bold;} .tabbox .tabbtn li.current{border-left:solid 1px #d5d5d5;border-right:solid 1px #d5d5d5;border-top:solid 1px #c5c5c5;} .tabbox .tabbtn li.current a{height:35px;line-height:34px;background:#fff;color:#4f4f4f;font-weight:800;} .tabbox .tabcon{padding:10px;border-width:0 1px 1px 1px;border-color:#ddd;border-style:solid;}JS代码部分:
<script type="text/javascript"> //tab plugins 插件 $(function(){ $('#statetab .tabbtn li').mouseover(function(){ TabSelect("#statetab .tabbtn li", "#statetab .tabcon", "current", $(this)) }); $('#statetab .tabbtn li').eq(0).trigger("mouseover"); function TabSelect(tab,con,addClass,obj){ var $_self = obj; var $_nav = $(tab); $_nav.removeClass(addClass), $_self.addClass(addClass); var $_index = $_nav.index($_self); var $_con = $(con); $_con.hide(), $_con.eq($_index).show(); } }); </script>样式方面可对CSS代码进行修改调整
<< 上一篇
下一篇 >>