【简易菜单切换(一级/二级)】

这篇博客介绍了如何实现一级和二级菜单的切换效果。在一级菜单中,讲解了静态和动态页面状态下的切换,强调动态状态下使用JavaScript时,addClass()方法需包裹在$()内。二级菜单部分则通过HTML的radio元素实现无JS切换效果,重点提示了name属性的设置要求。
摘要由CSDN通过智能技术生成

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></
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值