1对应的内容
</div>
<style>
.tab{width:100px;height:30px;line-height:30px;overflow:hidden;margIN:0 auto;}
.tab span{float:left;width:30px;text-align:center;background:#666;color:#fff}
.tab span.on{background:red;color:#fff}
.tablist{widtH:100px;height:100px;overflow:hidden;margIN:10px auto;border:1px solid #666;}
</style>
<script type="text/javascript" src="http://www.xuexi88.com/zhishi/引入jquery库例如js/jquery.js"></script>
<script type="text/javascript">
$('.tab span').each(function(i){
$(this).hover(function(){
$(this).addClass('on').siblings('span').removeClass('on');
$('.tablist:eq('+i+')').show().siblings('.tablist').hide();
})
})
</script>
这样就可以了 。
5.求JQ大神帮忙,怎么实现自动切换选项卡,下面贴上我想实现的代码给你段代码 你自己看看简洁Tab<style type="text/css">body{ padding:0；}/*选项卡1*/#lib_Tab1{width:500px;margin:0px;padding:0px;margin-bottom:15px；}/*选项卡2*/#lib_Tab2{width:576px;margin:0px;padding:0px;margin-bottom:15px； }/*菜单class*/.lib_tabborder{border:1px solid #95C9E1;}.lib_Menubox {height:28px;line-height:28px;position:relative;}.lib_Menubox ul{ margin:0px;padding:0px;list-style:none; position:absolute; top:3px; left:0; margin-left:10px; height:25px;text-align:center; }.lib_Menubox li{ float:left;display:block;cursor:pointer;width:114px;color:#949694; font-weight:bold; margin-right:2px;height:25px;line-height:25px; background-color:#E4F2FD }.lib_Menubox li.hover{ padding:0px;background:#fff;width:116px;border-left:1px solid #95C9E1; border-top:1px solid #95C9E1;border-right:1px solid #95C9E1; color:#739242;height:25px;line-height:25px; }.lib_Contentbox{clear:both;margin-top:0px; border-top:none;height:181px; text-align:center;padding-top:8px;}</style><body>