在前端开发中,可以通过以下步骤来实现在顶部li上设置活动类:
以下是一个示例代码:
HTML部分:
<ul id="menu">
<li class="active">子项1</li>
<li>子项2</li>
<li>子项3</li>
</ul>
JavaScript部分:
// 获取所有li元素
var menuItems = document.querySelectorAll('#menu li');
// 遍历每个子项,为其添加点击事件监听器
menuItems.forEach(function(item) {
item.addEventListener('click', function() {
// 移除当前具有活动类的li元素上的活动类
var currentActiveItem = document.querySelector('#menu li.active');
currentActiveItem.classList.remove('active');
// 将活动类添加到被点击的子项所在的li元素上
item.classList.add('active');
});
});
在上述示例中,我们首先通过querySelectorAll方法获取了所有的li元素,并使用forEach方法遍历每个子项。然后,为每个子项添加了一个点击事件监听器,当子项被点击时,会触发点击事件的处理函数。在处理函数中,我们首先通过querySelector方法获取当前具有活动类的li元素,并使用classList.remove方法移除其上的活动类。然后,使用classList.add方法将活动类添加到被点击的子项所在的li元素上。
请注意,上述示例中的活动类名为"active",你可以根据实际需求自定义活动类名。
领取专属 10元无门槛券
手把手带您无忧上云