<body> <div class="bougthDiv"> <div class="orderType"> <div class="selectedOrderType"><a href="#nowhere" orderstatus="all">所有订单</a></div> <div class=""><a href="#nowhere" orderstatus="waitPay">待付款</a></div> <div class=""><a href="#nowhere" orderstatus="waitDelivery">待发货</a></div> <div class=""><a href="#nowhere" orderstatus="waitConfirm">待收货</a></div> <div class=""><a href="#nowhere" orderstatus="waitReview" class="noRightborder">待评价</a></div> <div class="orderTypeLastOne"><a class="noRightborder"></a></div> </div> <div style="clear: both;"></div> <div class="orderListTitle"></div> <div class="orderListItem"> <table oid="946" orderstatus="waitReview" class="orderListItemTable" style="display: table;"></table> <table oid="945" orderstatus="waitConfirm" class="orderListItemTable" style="display: table;"></table> <table oid="944" orderstatus="waitDelivery" class="orderListItemTable" style="display: table;"></table> <table oid="943" orderstatus="waitPay" class="orderListItemTable" style="display: table;"></table> </div> </div> <script type="text/javascript"> $(function(){ $("a[orderstatus]").click(function(){ var orderstatus = $(this).attr("orderstatus"); if(orderstatus == 'all'){ $('table[orderstatus]').show(); } else{ $('table[orderstatus]').hide(); $('table[orderstatus='+orderstatus+']').show() } $('div.orderType div').removeClass("selectedOrderType"); $(this).parent("div").addClass("selectedOrderType"); }); }); </script> </body>
使用jquery实现的标题切换效果,当点击标题中的某个链接时,先获取到链接的orderstatus值,当orderstatus值为all时,显示全部table;当点击其他时,先隐藏所有的table,在显示当前链接对应的table;在添加选中的样式。
实现效果: