<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的选项卡切换源码的更多相关文章

  1. 绚丽而实用的jQuery/CSS3应用及源码

    HTML5加入WEB以后,网页世界就变得丰富绚丽起来了,但是我们在项目应用中,不仅需要绚丽的动画效果,而且更需要有实用的价值.今天分享的一些jQuery/CSS3应用不仅绚丽,而且还比较实用,如果感兴 ...

  2. 在网站开发中很有用的8个 jQuery 效果【附源码】

    jQuery 作为最优秀 JavaScript 库之一,改变了很多人编写 JavaScript 的方式.它简化了 HTML 文档遍历,事件处理,动画和 Ajax 交互,而且有成千上万的成熟 jQuer ...

  3. jquery Tabs选项卡切换

    效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  5. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  6. 14款让前端开发者心动的jQuery/CSS3插件及源码

    14款让前端开发者心动的jQuery/CSS3插件及源码,一起来看看. 1.jQuery左右滚动banner代码! DEMO演示    /    源码下载 2.jQuery QQ表情插件qqFace ...

  7. 分享7款非常实用的jQuery/CSS3插件演示和源码

    上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看. 1.jQuery ajax点击地图显示商家网点分布 ...

  8. 分享一组很赞的 jQuery 特效【附源码下载】

    作为最优秀的 JavaScript 库之一,jQuery 不仅使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果.这篇文章挑选了8个优秀的 jQuery 实例教程,这些  ...

  9. jQuery 2.0.3 源码分析core - 选择器

         声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢!      打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象 ...

随机推荐

  1. Ubuntu下为 Flash插件方法

    1.下载flash插件,地址:http://get.adobe.com/cn/flashplayer/ 下载tar格式的install_flash_player_11_linux_x86_64.tar ...

  2. php中的$_SERVER从哪来

    前几个月学了个tcpdump抓包命令,遇到任何问题总想试试,真是程序员的终级武器呀,它像显微镜一下,把任何的丑陋的bug都显示在你的面前. 为什么有题目中所说的疑问呢?因为我发现在不同的环境下面,我获 ...

  3. dedecms 常用标签

    都是常用的一些标签,大家可以用ctrl+F实现搜索. 网站名称:{dede:global.cfg_webname/} 网站根网址:{dede:global.cfg_basehost/} 网站根目录:{ ...

  4. 最火的Android开源项目（完结篇）

    65. AndroidSideMenu AndroidSideMenu能够让你轻而易举地创建侧滑菜单.需要注意的是,该项目自身并不提供任何创建菜单的工具,因此,开发者可以自由创建内部菜单. 66. A ...

  5. css float引发的塌陷问题及解决方案

    如果父元素高度自适应,而且子元素有设置float left/right, 那么此时父元素的高度不会随子元素而变,如果父元素不包含任何的可见背景,这个问题会很难被注意到,但是这是一个很重要的问题. ht ...

  6. keepalived + haproxy 实现web 双主模型的高可用负载均衡--转

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://xz159065974.blog.51cto.com/8618592/140581 ...

  7. WPF中DataGrid的ComboBox的简单绑定方式（绝对简单）

    在写次文前先不得不说下网上的其他wpf的DataGrid绑定ComboBox的方式,看了之后真是让人欲仙欲死. 首先告诉你一大堆的模型,一大堆的控件模板,其实或许你紧紧只想知道怎么让combobox怎 ...

  8. Ubuntu11.04上tftp服务的配置

    Ubuntu11.04上tftp服务的配置 2011-06-17 15:01 以前ubuntu版本上的tftp已经配置很多遍了,详情可以参见:www.mcuos.com/thread-646-1-2. ...

  9. iOS之获取当前时间日期并按固定格式显示

    写一个常用的获取当前日期,时间的代码.并且能以规定的格式显示出来 1 2 3 4 5 NSDate *currentDate = [NSDate date];//获取当前时间,日期 NSDateFor ...

  10. mongodb环境部署

    mongodb 环境部署 1.环境说明 安装软件:mongodb-linux-x86_64-.tgz 软件安装位置:/usr/local/mongodb 数据存放位置:/var/mongodb/dat ...