效果是,点击最上面一栏“所有订单”就出现所有的订单,然后点击其他栏就会分类显示订单。
$(function(){
$("a[orderstatus]").click(function(){
var orderstatus = $(this).attr("orderstatus");
if("all" == orderstatus)
{
$("table[orderstatus]").show();
}
else
{
$("table[orderstatus]").hide();
$("table[orderstatus="+orderstatus+"]").show();
}
//console.log(orderstatus);
$("div.orderType div").removeClass("selectedOrderType");
$(this).parent("div").addClass("selectedOrderType")
});
});
首先这个点击事件的选择就是第一次见,因为选择栏有很多个a标签,但是共同处是都有orderstatus这个自定义属性,也就是通过属性来选择的。
觉得比较巧妙的是, 把“all”这个所有订单 特例了出来,判断为是这个页面,那ok,全显示出来,否则显示分类的。然后还有添加选中类和删除选中类的操作,避免了写更多的css,很简单是实现css的变化。