非常实用的JQuery的选项卡切换源码

时间：2022-10-29 00:24:32
<html>

<head>

    <meta charset="utf-8">

    <title>简单选项卡</title>

    <style type="text/css">

    body,ul,li{margin:0;padding:0;}

    body{font:12px/1.5 Tahoma;}

    #outer{width:450px;margin:10px auto;}

    #tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}

    #tab li{float:left;color:#fff;height:30px;cursor:pointer;line-height:30px;list-style-type:none;padding:0 20px;}

    #tab li.current{color:#000;background:#ccc;}

    #content{border:1px solid #000;border-top-width:0;}

    #content ul{line-height:25px;display:none;margin:0 30px;padding:10px 0;}

    </style>

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            var timeid;

            $("#tab").find("li").each(function (index) {

                var sLi = $(this);

                sLi.mouseenter(function () {

                    timeid = setTimeout(function () {

                        sLi.addClass("current").siblings().removeClass("current");

                        sLi.parent().next().find("ul:eq(" + index + ")").show().siblings().hide();

                    }, 300);

                }).mouseleave(function () {

                    clearTimeout(timeid);

                })

            })

        })

    </script>

    </head>

<body>

<div id="outer">

<ul id="tab">

    <li class="current">科技</li>

    <li>旅游</li>

    <li>娱乐</li>

</ul>

<div id="content">

    <ul style="display:block;">

        <li>宏碁R7双转轴变形本评测：触摸板设计过于另类(图)</li>

        <li> 超薄加防水 索尼Xperia Tablet Z平板电脑评测</li>

        <li>诺基亚Lumia 925评测 最好的WP8智能手机</li>

        <li> 联想IdeaPad S405评测 性能主流续航待提升</li>

        <li>小辣椒M2智能手机评测: 再不换壳我们就该老了</li>

        <li>联想K900内部构造 看国产神器多少国产货(组图)</li>

        <li>联想K900内部构造 看国产神器多少国产货(组图)</li>

        <li>网页换肤效果</li>

        <li>联想K900内部构造 看国产神器多少国产货(组图)</li>

    </ul>

    <ul>

        <li>爱上西雅图，美国全景游精选推荐 </li>

        <li>爱上西雅图，美国全景游精选推荐 </li>

        <li>爱上西雅图，美国全景游精选推荐 </li>

        <li>爱上西雅图，美国全景游精选推荐 </li>

        <li>爱上西雅图，美国全景游精选推荐 </li>

        <li>爱上西雅图，美国全景游精选推荐 </li>

        <li>爱上西雅图，美国全景游精选推荐 </li>

        <li>爱上西雅图，美国全景游精选推荐 </li>

        <li>爱上西雅图，美国全景游精选推荐 </li>

        <li>爱上西雅图，美国全景游精选推荐 </li>

        <li>爱上西雅图，美国全景游精选推荐 </li>

        <li>爱上西雅图，美国全景游精选推荐 </li>

        <li>爱上西雅图，美国全景游精选推荐 </li>

    </ul>

    <ul>

        <li>李安宣布辞拍美剧《暴君》：需要休息</li>

        <li>李安宣布辞拍美剧《暴君》：需要休息</li>

        <li>李安宣布辞拍美剧《暴君》：需要休息</li>

        <li>李安宣布辞拍美剧《暴君》：需要休息</li>

        <li>李安宣布辞拍美剧《暴君》：需要休息</li>

        <li>李安宣布辞拍美剧《暴君》：需要休息</li>

        <li>李安宣布辞拍美剧《暴君》：需要休息</li>

        <li>李安宣布辞拍美剧《暴君》：需要休息</li>

        <li>李安宣布辞拍美剧《暴君》：需要休息</li>

        <li>李安宣布辞拍美剧《暴君》：需要休息</li>

        <li>李安宣布辞拍美剧《暴君》：需要休息</li>

    </ul>

</div>

</div>

</body>

</html>

相关文章