這個(gè)頁面交互也完成了逞怨，但是后面那個(gè)刪除交互還沒實(shí)現(xiàn)。因?yàn)檫@涉及到了后端福澡，所以現(xiàn)在暫且不做叠赦。除了上面選擇的是用div做的，從寶貝開始都是表格做的革砸。不過除秀，表格是一張表，下面每個(gè)商品內(nèi)容也是單獨(dú)的表做的算利，再用一個(gè)div把這些商品表包裹起來册踩。
當(dāng)點(diǎn)擊上面的選項(xiàng)就會(huì)出現(xiàn)所對(duì)應(yīng)的商品。上面的每個(gè)選項(xiàng)都是div效拭，在設(shè)置成向左浮動(dòng)就水平排列了暂吉。在每個(gè)選項(xiàng)都有orderStatus自定義屬性，并且值都不一樣缎患。每張商品表也有對(duì)應(yīng)的orderStatus屬性慕的。這樣，只要當(dāng)鼠標(biāo)點(diǎn)擊選項(xiàng)時(shí)挤渔，獲取當(dāng)前元素的orderStatus屬性值肮街。我把所有訂單選項(xiàng)的值設(shè)為all，把取到的的值和**all **比較判导。只要相等就顯示反之隱藏嫉父，并把選項(xiàng)表h和這個(gè)值相等的顯示。
然后就是那個(gè)紅色的下邊框了骡楼，代表選中。先把原來的選中項(xiàng)的class移除掉稽鞭。用的是$("div").removeClass("checkedDiv"),這句代碼代表的是移除掉div的checkedDiv類鸟整，我原來還以為是直接刪除這個(gè)div呢！再把當(dāng)前元素選中朦蕴，這里面加了個(gè)父div篮条，這是因?yàn)槲以赾ss里設(shè)置選中的的是div里面的,而orderStatus是在a面的，完成吩抓！代碼如下涉茧。
<script>
$(function(){
$("a[orderStatus]").click(function(){
var orderStatus = $(this).attr("orderStatus");
if ("all" == orderStatus){
$("table[orderStatus]").show();
}
else{
$("table[orderStatus]").hide();
$("table[orderStatus = "+orderStatus+"]").show();
}
$("div").removeClass("checkedDiv");
$("a[orderStatus = "+orderStatus+"]").parent("div").addClass("checkedDiv");
})
})
</script>
