jq 二级筛选切换


		.location_a {
			padding: 14px 0;
			height: 104px;
			background: lightblue;
		}

		.location_a dt {
			width: 48px;
			float: left;
			color: #aaa;
		}

		.location_a dd .item {
			padding: 0 6px;
			margin: 0 5px;
			line-height: 22px;
			display: inline-block;
			color: #333;
			text-decoration: none;
		}

		.location_a dd .item--active {
			border-radius: 2px;
			color: #fff !important;
			background: #f13232;
			box-shadow: 2px 2px 5px rgba(0, 0, 0, .05);
		}
<!-- 筛选 -->
			<div class="location_a clearfix">
				<dl>
					<dt>全部资料</dt>
					<dd class="ziliao">
						<a href="#" class="item item--active">SAT</a>
						<a href="#" class="item">SAT知道</a>
						<a href="#" class="item">SAT备考</a>
					</dd>
				</dl>
				<div class="ziliaoList">
					<dt>资料分类</dt>
					<dd>
						<a href="#" class="item item--active">全部</a>
						<a href="#" class="item">阅读</a>
						<a href="#" class="item">备考</a>
						<a href="#" class="item">教材</a>
					</dd>
					<dd>
						<a href="#" class="item item--active">全部</a>
						<a href="#" class="item">政策动态</a>
						<a href="#" class="item">入门常识</a>
						<a href="#" class="item">考试指南</a>
					</dd>
					<dd>
						<a href="#" class="item item--active">全部</a>
						<a href="#" class="item">SAT资料</a>
						<a href="#" class="item">备考计划</a>
						<a href="#" class="item">复习攻略</a>
						<a href="#" class="item">高分经验</a>
					</dd>
				</div>
			</div>
<script type="text/javascript">
			$(".ziliaoList dd").css("display", 'none')
			$(".ziliaoList dd").eq(0).css("display", 'block')
			$(".ziliaoList dd").children(":first").eq(0).addClass("item--active")
			$(".ziliao .item").click(function() {
				var index = $(this).index();
				$(".ziliao .item").removeClass("item--active")
				$(this).addClass("item--active")
				$(".ziliaoList dd").css("display", 'none')
				$(".ziliaoList dd").eq(index).css("display", 'block')
				$(".ziliaoList dd .item").removeClass("item--active")
				$(".ziliaoList dd:eq("+index+") .item").eq(0).addClass("item--active")

			})
			$(".ziliaoList dd .item").click(function() {
				var index = $(this).index();
				$(".ziliaoList dd .item").removeClass("item--active")
				$(this).addClass("item--active")
			})
			//jq ajax 请求
			
			// $.ajax({
			// 	type: "POST",
			// 	url: "http://www.xiaoma.com/channel_ajax.php",
			// 	data: {},
			// 	async: true,
			// 	dataType: "json",
			// 	sucess: function(res) {
			// 		console.log(res,'请求成功');
			// 	},
			// 	error: function(err) {
			// 		console.log(err,'请求失败');
			// 	}
			// });

		</script>

猜你喜欢

转载自www.cnblogs.com/heson/p/11791121.html
jq