<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. 最新版postgresql+pgboucer安装

    安装postgresql: wget https://pgbouncer.github.io/downloads/files/1.7.2/pgbouncer-1.7.2.tar.gz wget htt ...

  2. Spring Framework 5.0.0.M3中文文档 翻译记录 introduction

    翻译自: http://docs.spring.io/spring/docs/5.0.0.M3/spring-framework-reference/htmlsingle/#spring.tld.ha ...

  3. Oracle Linux 6.3下安装Oracle 11g R2(11.2.0.3)

    本文主要描写叙述了在Oracle Linux 6.3下安装Oracle 11gR2(11.2.0.3).从Oracle 11g開始,Oracle官方站点不再提供其Patch的下载链接,须要使用Meat ...

  4. 实现app上对csdn的文章查看,以及文章中图片的保存 (制作csdn app 完结篇)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24022165 今天给大家带来CSDN的完结篇,即增加文章的查看和文章中图片的保存 ...

  5. C语言中怎么求动态数组大小

    先来个简单的样例 int a[] = {1,2,3}; int arr_len = 0; arr_len = sizeof(a)/sizeof(int); 解释:sizeof() keyword是求出 ...

  6. 将View兑换Bitmap

    /** * 中间View保罗转化成Bitmap * */ private Bitmap saveViewBitmap(View view) { // get current view bitmap v ...

  7. ODB 短板

    首先是不支持联合主键,而且没有CHECK约束.UNIQUE约束,这是官方都承认的. 虽然提供了延迟加载(lazyload)来改善效率,不过使用起来不方便 查询不灵活,只能在WHERE之后的部分设定查询 ...

  8. Nginx/LVS/HAProxy负载均衡软件的优缺点详解(转)

    PS:Nginx/LVS/HAProxy是目前使用最广泛的三种负载均衡软件,本人都在多个项目中实施过,参考了一些资料,结合自己的一些使用经验,总结一下. 一般对负载均衡的使用是随着网站规模的提升根据不 ...

  9. 玩转Android之数据库框架ActiveAndroid的使用

    ActiveAndroid是一个开源的数据库框架,使我们在Android中使用数据库变得更为简单,今天我们就来看看这个数据库框架的使用. 1.引入ActiveAndroid 首先创建我们自己的项目,在 ...

  10. FWFT FIFO读操作注意

    FWFT:First Word Fall Through的缩写,好像是Xilinx的说法,Altera对应的概念是Show-ahead synchronous(SASO).即数据在rdreq有效之前就 ...