渡//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
>
實用的Jquery選項卡 <br>腳本> <br> <br>.order_box .stitle { <br>寬度：825px; <br>明確：正確； <br>高度：27px; <br>邊框底部：2px 實心#A100order} <br>} <box_>. .stitle .close { <br>寬度：80px; <br>高度：18px; <br>邊框頂部：1px 實心#dedede; <br>左邊實框：1px 實線#dedede; <br>右邊框：1px 實框：1px 實線#dedede；線#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>風格> <br> <br>//選項卡切換<br>$(function () { <br>$(".stitle li").click(function () { <br>var index_tab = $(this).parent(). child().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>頭> <br> <br><div class="order_box"> <br><div class="stitle"> <br><ul>; <br><li class="open">進行中</li> <br><li class="close">已完成 li> <br>
</li>
<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><br></box_>
