如何将css仅应用于单击菜单时单击的菜单？

要实现仅当单击菜单时才应用CSS样式，可以使用CSS的:focus伪类结合JavaScript来实现。以下是具体的实现方法：

基础概念

:focus伪类：当元素获得焦点时，:focus伪类会被应用。可以通过键盘（如Tab键）或鼠标点击来使元素获得焦点。
JavaScript：用于在用户点击菜单时添加或移除特定的CSS类。

实现步骤

HTML结构：创建一个简单的菜单结构。
CSS样式：定义菜单在获得焦点时的样式。
JavaScript：在点击菜单时添加或移除CSS类。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Focus Menu Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#" class="menu-item">Home</a></li>
            <li><a href="#" class="menu-item">About</a></li>
            <li><a href="#" class="menu-item">Services</a></li>
            <li><a href="#" class="menu-item">Contact</a></li>
        </ul>
    </nav>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

.menu-item:focus {
    background-color: #f0f0f0;
    outline: none;
}

JavaScript (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.menu-item');

    menuItems.forEach(item => {
        item.addEventListener('click', function() {
            // Remove focus from all items
            menuItems.forEach(i => i.blur());
            // Add focus to the clicked item
            this.focus();
        });
    });
});

应用场景

导航菜单：在用户点击导航菜单项时，应用特定的样式以突出显示当前选中的菜单项。
表单控件：在用户点击表单控件时，应用特定的样式以提高用户体验。

可能遇到的问题及解决方法

焦点丢失：如果页面上有其他可聚焦的元素（如按钮、输入框），可能会导致焦点丢失。可以通过JavaScript确保点击菜单项时，其他元素的焦点被移除。
键盘导航：如果用户使用键盘导航，:focus伪类可能不会被触发。可以通过JavaScript监听键盘事件来处理这种情况。

参考链接

通过上述方法，可以实现仅在单击菜单时应用CSS样式的效果。

页面内容是否对你有帮助？

有帮助

没帮助

如何将css仅应用于单击菜单时单击的菜单？

、、、

class="col-10 mb-1 small">${city.name}</div> </c:forEach> </div> 上面是我的代码当单击1day时，我想将对应于1day的div的背景颜色更改为红色。当点击2day时，我想将1day的颜色恢复为蓝色，并仅将2day

浏览 13提问于2021-07-30得票数 0

3回答

如何防止IE滤镜遮挡背景图像

、、、

单击菜单中的按钮时，Internet Explorer将隐藏图标。这不是其他浏览器中的行为。该图标是<a>的背景，使其可以单击。有没有办法在点击时显示图标？有没有可能，仅使用CSS，当单击<a>时，过滤器就会应用于<li> 这样，<a>的背景图标将被保留。

浏览 4提问于2011-04-08得票数 2

回答已采纳

4回答

jQuery -仅选择当前链接

、

如何将该功能仅应用于此菜单上的当前链接？如果我单击Decline链接，该函数将应用于所有链接。hiding) { $('.js-decline-txt').removeClass('hide').css('display','inline-block');

浏览 7提问于2015-11-19得票数 0

回答已采纳

2回答

鼠标切换后Div发生变化，Div不显示

、

我所拥有的代码的基本思想是：我有两个主要问题。首先，每当我单击菜单项时，它都不会被高亮显示(数字3

浏览 4提问于2013-11-10得票数 0

回答已采纳

1回答

将先前元素列表的CSS应用于javascript中的新元素列表

、、、、

我有6个<div>作为不同的应用程序。每个<div>包含一个菜单，每个菜单包含一个无序列表的子菜单。每个子菜单都包含<img>和<p>标记。我已经创建了一个后退按钮，因为我将遍历这些<div>、菜单和子菜单中的每一个。所有这些元素都将有一个Id。我已经创建了一个数组来存储所有元素列表的历史记录，我将使用 var pageHistory = { "H

浏览 0提问于2018-08-13得票数 0

3回答

在Joomla上自定义菜单项背景之一

、、

我一直在尝试自定义我目前使用的joomla模板上的菜单项。我以前使用过的一些菜单在查看源代码时通常会显示项ID，但我的模板根本不显示任何项ID。无论如何，我创建了下面的css代码，希望这将满足我的目标，但它没有工作。我想要完成的是让立即应用于我的管理主菜单面板列中的第30项，在任何悬停或任何活动之前将背景转换为红色。您可以在查看我的</e

浏览 2提问于2012-01-12得票数 1

1回答

CSS Mega菜单-触摸屏电脑上的怪异行为

、、、

我在这个网站上有一个菜单，它在标准的Windows8.1个人电脑上正常运行，但在带有触摸屏的Windows8.1笔记本电脑上看到铬时会出现一些奇怪的问题。子菜单项目是不可点击的，当你失去焦点，有一个奇怪的幽灵文本。以前没见过这个，也不太清楚是什么引起的。我正在使用基金会4，该网站是建立在果园。如有任何建议，将不胜感激！

浏览 8提问于2014-04-09得票数 0

回答已采纳

1回答

UI样式活动菜单项

、

我正试图找出如何将css样式应用于资料界面菜单的:active和:hover状态。 containerElement={<NavLink to={ `${pages.dashboard.slug}` } />} />

浏览 4提问于2016-09-12得票数 1

3回答

css菜单-活动主菜单项

、、

我使用的是WPML包提供的CSS菜单。问题是，所有的子菜单项也应用了这个标记，这意味着在大多数浏览器中(奇怪的是，不是当前的firefox)，只要它处于活动状态，包括子菜单项的所有菜单项都是蓝色的有没有人知道

浏览 1提问于2011-08-10得票数 1

回答已采纳

3回答

菜单颜色更改onclick

、

我有一个菜单，几乎与stackoverflow.com中使用DNN的菜单相似。如何更改所选菜单的颜色？我已经成功地在悬停时改变了颜色(使用CSS)，但我在这方面遇到了麻烦。仅使用CSS就可以实现更改单击项的颜色的效果吗？

浏览 0提问于2013-07-25得票数 0

8回答

如何动态改变所选网页菜单项的颜色？

、、、、

我是开发网页的新手。我希望创建类似于stackoverflow.com的菜单(如问题，标签，用户如上所示)。如何更改所选菜单的颜色(例如，单击时问题的背景颜色变为橙色)？我已经设法在悬停时改变颜色(使用CSS)，因为这很简单，但我在这方面遇到了麻烦。仅使用CSS就可以实现更改单击项的颜色的效果吗？

浏览 3提问于2011-06-05得票数 20

回答已采纳

3回答

仅当单击父级li时切换ul子菜单的显示

、

我已经浏览了这个网站上其他一些我认为可能有帮助的问题，比如和，但它们似乎没有回答我的问题。无论我是单击"Item 2“还是"Sub Item 1”，子菜单都是隐藏的。我意识到这是因为“子项1”是<li class="has-submenu">的一部分，所以一旦它被点击，它就会浏览并切换子菜单。CSS正在做它应该做的事情，我只是不知道如何将CSS调整

浏览 3提问于2016-05-23得票数 8

回答已采纳

2回答

在DOM树中间停止React "onClick“事件

、、、、

<Menu> <MenuItems /> </div>菜单组件本身具有事件处理逻辑:它侦听窗口上的单击事件并关闭菜单项。这样做是因为一个页面可以有多个菜单，打开一个应该关闭所有其他菜单。整个父项目组件也必须是可单击</

浏览 7提问于2018-02-10得票数 0

回答已采纳

2回答

子菜单出错

、、、、

我有一个网站的，我有一个奇怪的错误与子菜单或子部分，如“服务”。如何解决这个问题？

浏览 1提问于2011-09-10得票数 2

回答已采纳

1回答

Wordpress -如何在导航中添加主页？

如何将菜单添加到带有主页菜单的网站。我不想在页面中手动创建主页。在我的例子中，没有主页菜单。当我从外观->菜单中删除菜单时，它就会出现。

浏览 3提问于2015-04-07得票数 1

回答已采纳

1回答

如何要求显式取消yui弹出菜单？

、、

我有一个页面，上面有几个小部件，当单击每个小部件时，都会弹出一个yui弹出菜单:如果我单击小部件1，它的菜单就会出现。如果我现在点击widget 2，widget 1的菜单得到一个隐藏事件，widget 2的菜单得到一个show事件并出现。我想改变这一点，这样，当窗口小部件1的菜单打开时，必须通过点击页面背景(和/或，也许，另一次点击窗口小部件或退出键)

浏览 1提问于2011-04-05得票数 0

1回答

如何让拆分按钮只在拆分部分被单击时才显示上下文菜单？

、、

我发现了许多关于拆分按钮的问题，但我需要澄清。我使用的是Wisej拆分按钮。下面的代码将在拆分按钮的按钮部分(拆分按钮的左侧，具有按钮文本)的左下角显示上下文菜单。btnSender.PointToScreen(ptLowerLeft); } 我想知道如何让上下文菜单只在拆分按钮的拆分部分(即拆分按钮右侧带有箭头图标的小部分)被单击</

浏览 1提问于2018-03-07得票数 0

1回答

mmenu插件检查滑动是否完成

、、、、

我有一些CSS，可以在整个页面上添加div。我将这个css应用于一个div：position: relative;padding: .25rem 9999rem;color: white;height:100px;当我点击mmenu插件的菜单按钮时，div仍然在菜单的上方。为了解决这个问题

浏览 0提问于2015-10-11得票数 0

4回答

如何在css中突出显示菜单。我使用了a:active，但它并没有达到我所期望的目的。

、、

.cshtml.css a:active但是我需要菜单在鼠标单击菜单后在中突出显示。谢谢

浏览 6提问于2012-08-29得票数 0

回答已采纳

1回答

选择带有子菜单的菜单项，然后隐藏主菜单项。

、

我正在尝试创建一个移动菜单系统。如果您单击“菜单项4”，主菜单项将得到应用于它们的“无显示”，这正是我想要的，但我想单击“菜单项4”，以重新启用我似乎无法解决的问题：$("#menu-icon").on("click"toggleClass("active");

浏览 0提问于2014-09-08得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何将css仅应用于单击菜单时单击的菜单？

基础概念

实现步骤

示例代码

HTML

CSS (styles.css)

JavaScript (script.js)

应用场景

可能遇到的问题及解决方法

参考链接

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐