常用js效果：选项卡切换

时间：2023-03-09 00:46:20
常用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

相关文章