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 ...
随机推荐
- Android Camera(二)
上次已经写过SurfaceView显示Camera摄像了,代码可以运行,但是里面有问题,这次纠正过来,顺便实现变焦: 代码: public class CameravedioActivity exte ...
- Cocos2d 使用控制台打印的方法
1.打开当前项目的win32解决方案. 2.在解决方案管理器的win32文件夹下打开main.cpp 3.增加以下代码: #define USE_WIN32_CONSOLE //以下加到入口函数 #i ...
- 介绍Python程序员常用的IDE和其它开发工具
概述 “工欲善其事,必先利其器”,如果说编程是程序员的手艺,那么IDE就是程序员的吃饭家伙了. IDE 的全称是Integration Development Environment(集成开发环境), ...
- Eclipse最有用的快捷键
编辑 Ctrl+1 快速修复(最经典的快捷键,就不用多说了,可以解决很多问题,比如import类.try catch包围等) Ctrl+Shift+F 格式化当前代码 Ctrl+Shift+M 添加类 ...
- PHPstorm端口配置问题
- Spring注解基本解读
在一个类中使用Spring对象,办法如下: 使用注解的形式注入 从ApplicationContext中获取. T t = new ApplicationContext.getBean("x ...
- generic type
http://docs.oracle.com/javase/tutorial/java/generics/wildcardGuidelines.html
- STM8|STM32 看门狗使用
源:STM8|STM32 看门狗使用 STM8和STM32都配备了独立看门狗,其作用之大不言而喻.以下为STM8及STM32的独立看门狗使用例: 对于STM32单片机: #define SYS_IWD ...
- Python 函数简介之一
面向对象--->对象------>Class 面向过程--->过程------>def 函数式编程--->函数---->def 函数的介绍: def fun1(): ...
- 神经网络joone_engin模式识别示范,eclipse
链接: http://pan.baidu.com/s/1kVRducv 密码: junw