jquery实用代码 - 多标签切换显示内容效果
2012-11-10 18:16
645 查看
<!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=utf-8" /> <title>无标题文档</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> *{padding:0;margin:0} body{font-size:12px; padding:100px;} ul{list-style-type:none} .box ul{height:25px; line-height:25px;} /*position:relative;用于IE7上面*/ .box ul li{float:left; border:1px solid #9CF; margin-right:5px;padding:0 10px; border-bottom:none; position:relative; cursor:pointer; background: #E4F1FC} .content{width:320px; border:1px solid #9CF; padding:10px; height:100px;} * html .content{margin-top:-1px;}/*用于IE6上面*/ .box ul li.one{background:#FFF;} </style> <script type="text/javascript"> $(document).ready(function(){ $('.ct:gt(0)').hide() $('.box ul li').click(function(){ $(this).addClass("one") .siblings().removeClass(); //获取当前标签的索引值 var content_idnex = $('.box ul li').index(this); $('.ct').eq(content_idnex).show() .siblings().hide(); }); }); </script> </head> <body> <div class="box"> <ul> <li class="one">菜单一</li> <li>菜单二</li> <li>菜单三</li> </ul> <div class="content"> <div class="ct">菜单一的内容</div> <div class="ct">菜单二的内容</div> <div class="ct">菜单三的内容</div> </div> </div> </body> </html>
相关文章推荐
- JQuery切换显示的效果实例代码
- 几行简单的jQuery代码搞定tab标签切换效果
- 几行简单的jQuery代码搞定tab标签切换效果
- jQuery——1、图片动画效果+2、点击切换div显示其内容
- JQuery切换显示的效果实例代码
- Bootstrap实现的标签页内容切换显示效果示例
- jquery中实现标签切换效果的代码
- jquery中实现标签切换效果的代码
- jquery让返回的内容显示在特定div里(代码少而精悍)
- jQuery 网易相册鼠标移动显示隐藏效果实现代码
- jQuery鼠标经过方形图片切换成圆边效果代码分享
- 纯CSS实现Tab切换标签效果代码
- jQuery实用导航上下滑动及左右切换效果QQ浏览器
- 用jquery实现隐藏列表表单的显示关闭切换以及Ajax方式修改提交对应的那一行的修改内容。
- Jquery实现点击切换图片并隐藏显示内容
- 基于jQuery替换table中的内容并显示进度条的代码
- jquery实现的非常简单实用带有渐变切换效果的tab选项卡
- jquery实现初次打开有动画效果的网页TAB切换代码
- jquery实现标签切换效果