jQuery 选项卡
2015-12-20 14:35
531 查看
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS</title> <style> ul,li{ margin:0; padding:0; list-style:none; } .container{ width:800px; } #option{ height:38px; line-height:38px; border-bottom:1px solid #999; border-left:1px solid #999; } #option li{ float:left; padding:0 20px; height:37px; border-top:1px solid #999; border-right:1px solid #999; cursor:pointer; background-color:#f5f5f5; } #option li.current{ background-color:#fff; height:38px; } #card li{ height:300px; padding:20px; border:1px solid #999; border-top:none; display:none; } #card li.current{ display:block; } </style> <script src="./jquery-1.8.3.min.js"></script> <script> $(function(){ $("#option li").click(function(){ //alert($(this).index()); $(this).addClass('current').siblings().removeClass('current'); $("#card li").eq($(this).index()).addClass('current').siblings().removeClass('current'); }) }) </script> </head> <body> <h1>jQuery 选项卡</h1> <hr> <div class="container"> <ul id="option"> <li class="current">未付款订单</li> <li>已发货订单</li> <li>待评价订单</li> <li>已失效订单</li> </ul> <ul id="card"> <li class="current">这是 未付款 的订单</li> <li>这是 已发货 的订单</li> <li>这是 待评价 的订单</li> <li>这是 已失效 的订单</li> </ul> </div> </body> </html>
相关文章推荐
- jquery实现无缝滚动
- jquery 后台管理菜单展开与关闭实例(2)
- jquery 后台管理菜单展开与关闭实例(1)
- 基于jQuery和CSS3制作响应式水平时间轴附源码下载
- jQuery mobile 移动web(4)
- jquery操作iframe中的元素
- jquery mobile 移动web(4)
- 基于jQuery实现放大镜效果
- Jquery表单序列化和AJAX全局事件
- jQuery mobile 移动web(6)
- jquery遍历
- jquery mobile 移动web(5)
- jQuery的$.extend方法使用
- dom对象和jquery对象的区别
- 【jQuery】自定义类级别插件—— twoaddresult
- 【jQuery】自定义对象级插件——lifocuscolor插件
- 【jQuery】右键菜单插件——contextmenu
- 【jQuery】搜索插件——autocomplete
- 【jQuery】cookie插件——cookie
- 【jQuery】图片放大镜插件——jqzoom