<div class="codetitle"> <span><a style="CURSOR: pointer" data="93362" class="copybut" id="copybut93362" onclick="doCopy('code93362')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code93362"> <br> <br> <br> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <br><title>实用的Jquery选项卡</title> <br><script language="javascript" type="text/javascript" src="jquery-1.9.1.min.js"></script> <br><style type="text/css"> <BR>.order_box .stitle { <BR>width: 825px; <BR>clear: right; <BR>height: 27px; <BR>border-bottom: 2px solid #A10000; <BR>} <BR>.order_box .stitle .close { <BR>width: 80px; <BR>height: 18px; <BR>border-top: 1px solid #dedede; <BR>border-left: 1px solid #dedede; <BR>border-right: 1px solid #dedede; <BR>background: #f1f1f1; <BR>color: #000; <BR>text-align: center; <BR>float: left; <BR>margin-right: 5px; <BR>padding-top: 8px; <BR>} <BR>.order_box .stitle .open { <BR>width: 82px; <BR>height: 20px; <BR>background: #A10000; <BR>color: #fff; <BR>text-align: center; <BR>float: left; <BR>margin-right: 5px; <BR>padding-top: 8px; <BR>overflow: hidden; <BR>} <BR>.order_box ul li { <BR>cursor: pointer; <BR>display: list-item; <BR>list-style:none; <BR>} <BR></style> <br><script type="text/javascript"> <BR>//选项卡切换 <BR>$(function () { <BR>$(".stitle li").click(function () { <BR>var index_tab = $(this).parent().children().index($(this)); //选项卡的索引值 <BR>$(this).parent().find(".open").removeClass("open").addClass("close"); //选项卡背景处理 <BR>$(this).removeClass("close").addClass("open"); <BR>var content_obj = $(".cntorder") //内容节点 <BR>content_obj.hide(); <BR>content_obj.eq(index_tab).show(); <BR>}); <BR>}); <BR></script> <br> <br> <br><div class="order_box"> <br><div class="stitle"> <br><ul> <br><li class="open">进行中</li> <br><li class="close">已完成</li> <br><li class="close">无效</li> <br> </ul> <br> </div> <br><div class="cntorder">tab1</div> <br><div class="cntorder" style="display: none;">tab2</div> <br><div class="cntorder" style="display: none;">tab3</div> <br> </div> <br> <br> <br> </div>
