实用的Jquery选项卡TAB
<!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>