.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>