作者:天之蓝 | 来源:互联网 | 2013-06-24 15:59
今天推荐一个简单实用jquery tab选项卡,鼠标滑过选项卡,一个页面可以使用无限次。全兼容IE6+、FF等主流浏览器。
不多说了。先上图
下面贴代码:
html
内容四
css
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}
a{color:#333;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/* 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;}
jquery需先加载jquery
//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();
}
});