实用的Jquery选项卡TAB
2016-12-29 00:00
666 查看
<!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>实用的Jquery选项卡</title> <script language="javascript" type="text/javascript" src="jquery-1.9.1.min.js"></script> <style type="text/css"> .order_box .stitle { width: 825px; clear: right; height: 27px; border-bottom: 2px solid #A10000; } .order_box .stitle .close { width: 80px; height: 18px; border-top: 1px solid #dedede; border-left: 1px solid #dedede; border-right: 1px solid #dedede; background: #f1f1f1; color: #000; text-align: center; float: left; margin-right: 5px; padding-top: 8px; } .order_box .stitle .open { width: 82px; height: 20px; background: #A10000; color: #fff; text-align: center; float: left; margin-right: 5px; padding-top: 8px; overflow: hidden; } .order_box ul li { cursor: pointer; display: list-item; list-style:none; } </style> <script type="text/javascript"> //选项卡切换 $(function () { $(".stitle li").click(function () { var index_tab = $(this).parent().children().index($(this)); //选项卡的索引值 $(this).parent().find(".open").removeClass("open").addClass("close"); //选项卡背景处理 $(this).removeClass("close").addClass("open"); var content_obj = $(".cntorder") //内容节点 content_obj.hide(); content_obj.eq(index_tab).show(); }); }); </script> </head> <body> <div class="order_box"> <div class="stitle"> <ul> <li class="open">进行中</li> <li class="close">已完成</li> <li class="close">无效</li> </ul> </div> <div class="cntorder" >tab1</div> <div class="cntorder" style="display: none;">tab2</div> <div class="cntorder" style="display: none;">tab3</div> </div> </body> </html>
相关文章推荐
- 实用的Jquery选项卡TAB示例代码
- jquery实现的非常简单实用带有渐变切换效果的tab选项卡
- 实用的Jquery选项卡TAB示例代码
- 一款基于jQuery的热点新闻Tab选项卡插件
- jQuery EasyUI Tab 选项卡问题小结
- 我是如何去了解jquery的(五),案例之切换选项卡Tab
- jQuery滑动tab选项卡
- jquery实现可自动收缩的TAB网页选项卡代码
- jquery写的一个TabControl类,动态创建选项卡切换Tab
- jquery实现Tab选项卡菜单
- jQuery-ui tab选项卡
- 一款基于jQuery的热点新闻Tab选项卡插件
- 选项卡插件jquery.tab.js和不用js写选项卡
- jQuery插件开发-----tab选项卡
- jQuery EasyUI API Tabs 标签页/选项卡
- 出色的基于JQuery的Tab选项卡
- jquery tab选项卡
- 15个实用的jQuery选项卡插件
- 30 个实用的 jQuery 选项卡/导航教程推荐
- jQuery实现TAB选项卡切换特效简单演示