<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><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 전환//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><머리> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><title>Jquery용 Jquery选项卡</title> <br><script 언어="javascript" type="text/javascript" src="jquery-1.9.1.min.js"></script> <br><style type="text/css"> <br>.order_box .stitle { <br>너비: 825px; <br>지우기: 그렇죠; <br>높이: 27px; <br>테두리 하단: 2px 솔리드 #A10000; <br>} <br>.order_box .stitle .close { <br>너비: 80px; <br>높이: 18px; <br>테두리 상단: 1px 단색 #dedede; <br>테두리 왼쪽: 1px 단색 #dedede; <br>테두리 오른쪽: 1px 단색 #dedede; <br>배경: #f1f1f1; <br>색상: #000; <br>텍스트 정렬: 가운데; <br>플로트: 왼쪽; <br>오른쪽 여백: 5px; <br>패딩 상단: 8px; <br>} <br>.order_box .stitle .open { <br>너비: 82px; <br>높이: 20px; <br>배경: #A10000; <br>색상: #fff; <br>텍스트 정렬: 가운데; <br>플로트: 왼쪽; <br>오른쪽 여백: 5px; <br>패딩 상단: 8px; <br>오버플로: 숨김; <br>} <br>.order_box ul li { <br>커서: 포인터; <br>표시: 목록 항목; <br>목록 스타일:없음; <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></script> <br></head> <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></body> <br></html> <br><br> </div>
