<div class="liuxueContent">
//触发对象,既鼠标点击对象
<ul class="liuxueMenu" id="liuxueMenu">
<li class="liuxueMenuItem active" data-toggle="#content1">北美体系</li>
<li class="liuxueMenuItem" data-toggle="#content2">英联邦体系</li>
</ul>
//内容切换区域
<ul class="newList active" id="content1">
<li class="newItem">
<a href="" class="newItemTitle">【雅思写作】7.28雅思新题大作文:预防青少年犯罪</a>
<span class="newItemDate">2018-08-01</span>
</li>
<li class="newItem">
<a href="" class="newItemTitle">【雅思写作】7月19日雅思大作文真题</a>
<span class="newItemDate">2018-08-03</span>
</li>
<li class="newItem">
<a href="" class="newItemTitle">【雅思口语】如何获得雅思口语考官好感?</a>
<span class="newItemDate">2018-09-15</span>
</li>
</ul>
<ul class="newList" id="content2">
<li class="newItem">
<a href="" class="newItemTitle">【雅思写作】《剑13》Test 4小作文地图题参考范文</a>
<span class="newItemDate">2018-10-08</span>
</li>
<li class="newItem">
<a href="" class="newItemTitle">【雅思写作】7.28雅思新题大作文:预防青少年犯罪</a>
<span class="newItemDate">2018-08-01</span>
</li>
<li class="newItem">
<a href="" class="newItemTitle">【雅思写作】7月19日雅思大作文真题</a>
<span class="newItemDate">2018-08-03</span>
</li>
</ul>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
$('#liuxueMenu').on('click','.liuxueMenuItem',function (e) {
var $this=$(this);
$(e.target).addClass('active').siblings().removeClass('active');
var $id=$this.attr('data-toggle');
$($id).addClass('active').siblings().removeClass('active');
})
</script>