常用js效果二：选项卡切换

-11 14 常用js效果二：选项卡切换 Category:jquery学习 View: Author:燕子

js选项卡，很多网站都会用到，我这里用jquery给整了一个简单但是却很实用的js选项卡，废话不多说，直接上代码：

XML/HTML代码

<style>
.txtadsblk01{ width:200px;}
.txtadsblk01 ul{ padding:0; margin:0;}
.txtadsblk01 li{ float:left; list-style:none; margin-left:3px; border:1px solid #ccc; padding:0 12px;}
.xuanxiangkadiv{ width:180px; margin:0 0; margin-top:12px; border:1px solid #CCC; padding:6px;}
.hide{ display:none;}
.block{ display:block;}
.now{ border:1px solid #333 !important;}
</style>
<div class="txtadsblk01">
<ul id="txtblk01menu">
<li class="now"><a target="_blank" href="http://edu.sina.com.cn/">教育</a></li>
<li class=""><a target="_blank" href="http://edu.sina.com.cn/">培训</a></li>
<li class=""><a target="_blank" href="http://edu.sina.com.cn/">招生</a></li>
<div style=" clear:both;"></div>
</ul>
<div class="xuanxiangkadiv">
这是选项卡1111的内容
这是选项卡1111的内容这是选项卡1111的内容这是选项卡1111的内容这是选项卡1111的内容这是选项卡1111的内容这是选项卡1111的内容这是选项卡1111的内容
</div>
<div class="xuanxiangkadiv hide">
这是选项卡2222的内容这是选项卡2222的内容 2222的内容 2222的内容 2222的内容 2222的内容 2222的内容
</div>
<div class="xuanxiangkadiv hide">
这是选项333卡3的内容
</div>
</div>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".txtadsblk01 li").mouseover(function(){
$('.txtadsblk01 li').removeClass("now");
$(this).addClass("now");
var likey = $(".txtadsblk01 li").index(this);
$('.xuanxiangkadiv').addClass("hide").removeClass("block");
$(".xuanxiangkadiv:eq("+likey+")").addClass("block").removeClass("hide");
});
})
</script>