<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 Transitional//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 選択</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>幅: 825px; <br>クリア: そうです。 <br>高さ: 27px; <br>border-bottom: 2px ソリッド #A10000; <br>} <br>.order_box .stitle .close { <br>幅: 80px; <br>高さ: 18px; <br>border-top: 1px ソリッド #dedede; <br>border-left: 1px ソリッド #dedede; <br>border-right: 1px ソリッド #dedede; <br>背景: #f1f1f1; <br>カラー: #000; <br>text-align: 中央; <br>フロート: 左; <br>マージン右: 5px; <br>パディングトップ: 8px; <br>} <br>.order_box .stitle .open { <br>幅: 82px; <br>高さ: 20px; <br>背景: #A10000; <br>色: #fff; <br>text-align: 中央; <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>varindex_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> <br></body> <br></html> <br><br>
