标题点击切换效果

最新推荐文章于 2022-06-07 14:05:54 发布

aks6853428

最新推荐文章于 2022-06-07 14:05:54 发布

阅读量229

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/homle/p/8228921.html

版权

	<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；在添加选中的样式。

　　实现效果：