常用js效果：选项卡切换

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

<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>

预览地址：

http://www.phplover.cn/demo/jsxuanxiangka/demo.html

From: http://www.phplover.cn/post/442.html

附：另一个选项卡切换：

http://www.17sucai.com/preview/11/2013-04-30/xxk/index.html