jquery之选项卡效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery实现Tab选项卡切换_大头网</title>
<style type="text/css">
*{margin:0 auto;padding:0;list-style-type:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* tab */
#tab{width:400px;position:relative;margin:40px auto;}
#tab .tab_menu{width:100%;float:left;position:absolute;z-index:1;}
#tab .tab_menu li{float:left;width:92px;height:30px;line-height:30px;border:1px solid #ccc;border-bottom:0px;cursor:pointer;text-align:center;margin:0 2px 0 0;}
#tab .tab_box{width:400px;height:100px;clear:both;top:30px;position:relative;border:1px solid #CCC;background-color:#FF0;}
#tab .tab_menu .selected{background-color:yellow;cursor:pointer;}
.hide{display:none;}
.tab_box div{padding:10px;}
</style>
<script type="text/javascript" src="js/jQuery1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $tab_li = $('#tab ul li');
$tab_li.hover(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var index = $tab_li.index(this);
$('div.tab_box > div').eq(index).show().siblings().hide();
});
});
</script>
</head>
<body>
<!-- 代码 开始 -->
<div id="tab">
<ul class="tab_menu">
<li class="selected">时事</li>
<li>体育</li>
<li>新闻</li>
</ul>
<div class="tab_box">
<div>时事的内容</div>
<div class="hide">体育的内容</div>
<div class="hide">新闻的内容</div>
</div>
</div>
<!-- 代码 结束 -->
<div style="text-align:center;margin:150px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>来源：<a href="http://www.datouwang.com/" target="_blank">大头网</a></p>
<p>转载请注明出处，此代码仅供学习交流，请勿用于商业用途。</p>
<p><script src="http://www.datouwang.com/img/js/demo_ad.js"></script><center style="display:none"><script src="http://www.datouwang.com/img/js/demo_tj.js"></script></center></p>
</div>
</body>
</html>
________
jquery之选项卡效果的更多相关文章
- Jquery实现选项卡效果
<script type="text/javascript"> $(document).ready(function(){ $('.ct:gt(0)').hide(); ...
- 使用jquery实现选项卡切换效果
几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
- JQuery实现广告效果（滚动切换）
JQuery实现广告效果(滚动切换) Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...
- 16个最棒的jQuery视差滚动效果教程
今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
随机推荐
- [转]慎用InputStream的read()方法
InputStream 此抽象类是表示字节输入流的所有类的超类. 我们从输入流中读取数据最常用的方法基本上就是如下 3 个 read() 方法了: 1 . read () 方法,这个方法 从输入流中读 ...
- gameUnity 0.15 beta 网络游戏框架
增加了 换人 和换衣服 ,加入了动画事件.beta版本 0.15测试版本 目前就到此,正式版本 会在7月底 和 0.2版本一起推出.届时,换装系统 将不仅仅是 换装备,而是有 换装后 打怪的体验,更 ...
- POJ 2773 Happy 2006（欧几里德算法）
题意:给出一个数m,让我们找到第k个与m互质的数. 方法:这题有两种方法,一种是欧拉函数+容斥原理,但代码量较大,另一种办法是欧几里德算法,比较容易理解,但是效率很低. 我这里使用欧几里德算法,欧几里 ...
- Nape "不动"刚体的碰撞交互
"不动"刚体,这里指的是以下两类刚体: 1.刚体的allowMovement和allowRotation都设false的刚体 2.KINEMATIC类型的刚体 如下代码,测试发现输 ...
- 使用nginx简单实现负载均衡
只是简单使用nginx玩玩而已,知道能这么用,但是在实际项目中并没有实践过,在项目不大的时候用不到,但是对于理解负载均衡来说还是可以的. 利用虚拟机安装了三个centOS系统,然后顺便装了环境. 这里 ...
- 如何修改apache的默认web端口
在apache的安装文件夹里搜索 httpd.conf 文件,用记事本打开,搜索 Listen 80 ,把80(默认端口)改为你想用的端口,保存,重新启动apache服务即可!
- hdu_3564_Another LIS(线段树+LIS)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3564 题意:给你N个数的位置.数i的位置为第i个数,比如 0 0 2,表示1插在第0个位置,此时数列为 ...
- Delphi MaskEdit用法（转）
源:http://www.cnblogs.com/zhangzhifeng/archive/2011/10/12/2208640.html MaskEdit是用来建立编辑框的,但它与Edit编辑框可以 ...
- 简单查询plan
-> alter session set statistics_level=all; select /*+ gathe_plan_statistics */ * from ts.ts_recor ...
- 创业手记 Mr.Hua
<MR.HUA 创业手记>这本书期盼了很久,也看了很久,每每回味都是意犹未尽,仔细研读,真有醍醐灌顶之意.如果说没有跟Mr.Hua结识,那真该庆幸自己得以拜读.我把自己觉得华哥不错的句子摘 ...