【简易菜单切换（一级/二级）】

1.一级菜单切换

1.1 静态页面状态

<div class="on navItem">
	<div class="navItemBanner">
	    <p>2022届优秀作品</p>
	</div>
</div>
<div class="navItem">
	<div class="navItemBanner">
		<p>2021届优秀作品</p>
	</div>
</div>
<div class="navItem">
	<div class="navItemBanner">
		<p>2020届优秀作品</p>
	</div>
</div>

点击切换类型

// 类型切换
$(".navItem").click(function() {
	console.log($(this))
	$(this).addClass("on").siblings().removeClass("on")
});

1.2 动态页面状态

<div class="nav" id="typeList"></div>

for (var i = 0; i < data.length; i++) {
	let item = data[i];
	let newhtml = <div class="navItem" onclick="search( + item.typeId + ,+i+)">+
	    <div class="navItemBanner">+
	    <p>+item.name+</p>+
		</div></div>	
	$("#typeList").append(newhtml)
}
$("#typeList").children().first().addClass(on)

点击事件

function search(val,index) {
	console.log(val,index)
	$("#typeList .navItem").removeClass("on")
	$($(".navItem")[index]).addClass(on)
}

输出 $(".navItem")[index].addClass(on) 会报错，一定要加一层$()

2.二级菜单切换

* 这里使用的是radio组合，不需要配合js方法就可以实现切换效果

* 注意<input type="radio" id="rd + item.courseTypeId + " name="rd"> 的name一定要指向同一个，否则会没有效果

<div class="tabs" id="typeList"></div>

for (var i = 0; i < data.list.length; i++) {
	let item = data.list[i];
	let childrenItem = "";
	for (var j = 0; j < item.children.length; j++) {
		childrenItem += <div class="tab-content" onclick="search( + item.children[j].courseTypeId + )"> +
		item.children[j].name + </div>
	}
	let newhtml = <div class="tab"> +
				<input type="radio" id="rd + item.courseTypeId + " name="rd"> +
				<label class="tab-label" for="rd + item.courseTypeId + "> + item.name + </label> +
				childrenItem + </div>
	$("#typeList").append(newhtml)
}