是一种前端开发中常见的交互效果,通常用于网页导航菜单或选项卡等场景。当用户单击菜单项时,该菜单项会呈现出活动状态,以提醒用户当前所处的页面或功能。
这种效果可以通过以下步骤实现:
<ul>
)和列表项(<li>
)来构建菜单。<ul>
<li onclick="activateMenuItem(this)">菜单项1</li>
<li onclick="activateMenuItem(this)">菜单项2</li>
<li onclick="activateMenuItem(this)">菜单项3</li>
</ul>
li {
/* 默认状态样式 */
}
li.active {
/* 活动状态样式 */
}
function activateMenuItem(item) {
// 移除所有菜单项的活动状态
var menuItems = document.getElementsByTagName('li');
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].classList.remove('active');
}
// 添加当前点击的菜单项的活动状态
item.classList.add('active');
}
这样,当用户单击菜单项时,会触发activateMenuItem
函数,该函数会先移除所有菜单项的活动状态,然后再为当前点击的菜单项添加活动状态,从而实现菜单项在onclick处于活动状态的效果。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),产品介绍链接地址:https://cloud.tencent.com/product/cvm
领取专属 10元无门槛券
手把手带您无忧上云