<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；在添加选中的样式。
实现效果：
