jquery tabs选项卡效果

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