在javascript菜单中的foreach切换应仅在我单击的图标中处于活动状态
在JavaScript中，如果你想在点击某个图标时仅让该图标的菜单项处于活动状态，你可以使用事件监听和条件判断来实现。以下是一个简单的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Active State</title>
<style>
.active {
color: red; /* 或者其他你想要的活动状态样式 */
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#" data-target="item1">Item 1</a></li>
<li><a href="#" data-target="item2">Item 2</a></li>
<li><a href="#" data-target="item3">Item 3</a></li>
</ul>
<script>
document.addEventListener('DOMContentLoaded', function() {
const menuItems = document.querySelectorAll('#menu a');
menuItems.forEach(item => {
item.addEventListener('click', function(event) {
event.preventDefault(); // 阻止默认的链接跳转行为
// 移除所有菜单项的活动状态
menuItems.forEach(menuItem => {
menuItem.classList.remove('active');
});
// 给当前点击的菜单项添加活动状态
this.classList.add('active');
});
});
});
</script>
</body>
</html>基础概念
- 事件监听：通过
addEventListener方法为元素添加事件处理程序。 - 条件判断：在事件处理程序中，通过条件判断来决定是否执行某些操作。
- 类操作：通过
classList属性来添加或移除元素的类。
优势
- 简单易实现：代码逻辑简单，易于理解和维护。
- 灵活性：可以根据需要自定义活动状态的样式和行为。
类型
- 事件驱动编程：通过事件监听和触发来实现交互效果。
应用场景
- 导航菜单：在导航菜单中，点击某个菜单项时，仅让该菜单项处于活动状态。
- 选项卡切换：在选项卡组件中，点击某个选项卡时，仅让该选项卡处于活动状态。
可能遇到的问题及解决方法
- 事件冒泡：如果菜单项在嵌套结构中，可能会出现事件冒泡问题。可以通过
event.stopPropagation()方法来阻止事件冒泡。 - 动态添加元素：如果菜单项是动态添加的，需要在添加元素后重新绑定事件监听器。
参考链接
通过以上代码和解释，你应该能够实现点击图标时仅让该图标的菜单项处于活动状态的功能。
相关·内容
我希望你做得很好，我正在使用django，问题是我有一个包含menuToggle的项目列表，我的代码是这样的 <!</div> <script> el
浏览 29提问于2021-11-19得票数 0
回答已采纳
我使用此方法仅在应用程序处于活动状态时才显示NSStatusItem菜单。 if(!activateIgnoringOtherApps:YES];}
它完美的工作，但cancelTracking似乎阻挡了NSStatusItem的蓝色高光因此，当我单击状态菜单</
浏览 4提问于2011-08-11得票数 1
回答已采纳
为了改进我的WordPress ，我希望在父/兄弟页面处于活动状态时显示子菜单项。在启动时，菜单应该保持紧凑(就像当前在TwentyFifteen中所做的那样)，如下所示：
分页b
浏览 2提问于2015-08-20得票数 3
回答已采纳
我有一个状态栏应用程序(在系统顶部栏中运行的应用程序)。当我点击状态栏中的图标时，弹出一个菜单，其中有一项用于配置我的应用程序。当我按下这一项时，主应用程序窗口显示为wndMain makeKeyAndOrderFront:self；问题是单击状态栏图标不会激活应用程序，如果此时其他应用程序处于活动</
浏览 4提问于2010-02-10得票数 8
在我的应用程序中，我必须使用带有图标和快捷按钮的网格视图开发一个菜单，以便轻松切换语言选项。因此，当用户单击此按钮时，“英语菜单”应切换到“乌尔都语菜单”，反之亦然。那么，我是不是必须创建两个菜单活动:一个是英语菜单活动，另一个是乌尔都语菜单</em
浏览 0提问于2014-02-27得票数 0
语义-ui与我的laravel应用程序集成。所有按钮都正常工作，但是Menubar没有工作，也就是说，不管我从文档中复制了什么代码，它都是那样显示的。我把这些文件联系起来了- &l
浏览 0提问于2019-02-11得票数 0
我已经做了自己的下拉菜单，但我想让条件，在点击鼠标，它会显示列表，而不是鼠标悬停显示，所以如何使用CSS，有什么属性，我可以使用吗？我不想使用jquery或JS。这是我的源代码： <li>About</li> Portfolio <li>Web D
浏览 7提问于2014-04-10得票数 0
回答已采纳
2回答
我需要一个下拉菜单，当我点击更多的选项，如谷歌。它正在工作，但当我在div之外单击时，它处于非活动状态。当我在div之外单击时，我想切换菜单。我的javascript： $(this).toggleClass('
浏览 0提问于2013-08-02得票数 2
1回答
在构建bootstrap 4导航栏菜单时，我尝试在单击切换按钮后仅设置响应式菜单的样式；但是，我注意到对于未折叠和折叠的UL，只有一个css选择器。我正在与wordpress合作，所以UL在我的例子中是boostrap walker nav，但我创建了一个来演示我在静态html中</e
浏览 0提问于2017-11-11得票数 0
3回答
我们的网站上有一个带有css样式的顶部菜单。问题是，我们有附加到按钮的功能，只需打开或关闭一些东西。但是我们不能使用“活动”css样式，因为这个链接没有附加url。但是当按钮处于活动状态时，我们想要改变它的颜色。<header> <nav>
浏览 5提问于2015-01-22得票数 0
回答已采纳
1回答
我想在Android的选项菜单中切换Wifi的状态。我想通过显示两个图标来扩展它的功能，一个是“打开”，另一个是“关闭”。它的工作方式应该是当用户按下菜单键时：
他应该看到Wifi的当前状态"on“或”off“当用户单击Wifi选项时，必须根据其状态"on”或“off”显示图标，它应该切换W
浏览 2提问于2012-01-04得票数 0
回答已采纳
1回答
我有一个drupal站点和一个叫做“品牌”的主页。此页面包含子页面，例如"brand1“。
主页(品牌)在主导航中，当页面打开时，导航点“品牌”处于活动状态(另一种颜色)。现在，我希望当你打开"“时，导航中的主页面”品牌“也是活动的，因为你是在主类别”品牌“的子页面"brand1”中。就像一条小路。
浏览 2提问于2016-06-07得票数 0
我正在制作状态栏macOS应用程序。在单击状态栏图标时，我显示的是一个NSPopover (不是NSMenu)。但是，当显示我的NSPopover时，我的状态菜单图标不会被高亮显示。当我点击它的时候，它只会被突出显示。我希望它保持高亮显示，就像它如何使用wifi状态栏
浏览 15提问于2021-08-13得票数 2
我已经建立了一个带有图标的边菜单，在点击每个图标之后，一个菜单滑出，上面有相应的项目。通过使用然后放由于prop...this使其如此，当我单击icon1时，菜单将打开，当再次单击icon1时，该菜单
浏览 1提问于2017-10-09得票数 0
此function在单击汉堡包图标时切换其活动状态。同样，在文档上的任意位置单击也会执行相同的操作，但前提是下拉菜单处于打开状态。$(".hamburger").toggleClass('is-active'); }});
浏览 28提问于2018-03-04得票数 0
回答已采纳
当模式对话框处于活动状态时，主应用程序窗口是否可以检测到WM_CLOSE事件？如果没有，有什么方法可以检测到WM_CLOSE事件，因为对话框的事件处理程序也检测不到它。要自己观察此行为，请打开记事本的“关于”菜单，然后右键单击任务栏中的记事本图标，并选择“关闭窗口”选项，它将不起作用。
有没有人知道在模式窗口处于活动状态时为应用程序捕获WM_CL
浏览 4提问于2013-07-04得票数 3
回答已采纳
3回答
q=$1 [L,QSA目标:我正在尝试在Drupal7站点上启用"Clean URL“(这样example.com/?q=user就可以解析为example.com/user)。我已经花费了太多的时间来倾注官方的Drupal文档和评论，但都无济于事，所以任何建议都非常感谢！我已经选中了Drupal中的"Enable Clean URLs“框(/admin/config/s
浏览 2提问于2012-03-11得票数 1
回答已采纳
3回答
我正在开发一个带有相当大的折叠样式导航的 (它不使用折叠UI)。
有四个子菜单部分可在单击时切换为打开状态。我已突出显示活动链接。剩下的一步是在子菜单中的页面上保持当前活动的子菜单处于打开状态。当我处理静态页面时，我可以让它保持打开，但在这
浏览 2提问于2009-12-01得票数 1
回答已采纳
我有一个简单的菜单/手风琴滑块。我想将class=“活动”添加到单击的链接中，然后向下滑动以显示UL。当单击另一个单独的菜单项时，应从前面的元素中移除活动类，并将其添加到刚才单击的元素中。另外，如果在活动模式下单击相同的内容，则滑块应该向上滑动并删
浏览 8提问于2015-07-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
