码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-09-15 15:43:49      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   java   ar   div   art   sp   

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

 

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

标签:style   blog   color   io   java   ar   div   art   sp   

原文地址:http://www.cnblogs.com/vip-ygh/p/3972750.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!