时间戳

首页 > 解决方案 > 如何在选择或聚焦后更改菜单的颜色

html - 如何在选择或聚焦后更改菜单的颜色

问题描述

li a:hover {
  background-color: #111;
  text-transform: lowercase;
}

li a:focus {
  background-color: green;
}
<ul>
  <li> <a tabindex=0 href="home.html"> Home</a></li>
  <li> <a tabindex=0 href="about.html"> About us</a></li>
  <li> <a tabindex=0 href="contact.html"> Contact us</a></li>
  <li> <a tabindex=0 href="products.html">Products</a></li>
  <li> <a tabindex=0 href="services.html"> Services</a></li>
</ul>

我一直在尝试在单击菜单项后更改它的颜色，以便用户知道他在哪个页面上，但我一直无法。我尝试了几种通过谷歌搜索获得的方法，但它给了我相同的结果：当我按下鼠标时，它会发生变化，但当我释放它时，颜色/背景颜色会恢复到以前的颜色。

标签： htmlcss

解决方案

您可以使用 JavaScript 为您的元素添加一个活动类。这是一个使用 jQuery 的示例，但您可以使用纯 JavaScript 来完成。

var $link_menu = $('ul li a');
$link_menu.on('click', function() {
  // When you click on a link on your menu, it removes all the active class
  $link_menu.removeClass('active');
  // Add an active class on the selected element
  $(this).addClass('active');
});
.active {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li> <a tabindex=0 href="#"> Home</a></li>
  <li> <a tabindex=0 href="#"> About us</a></li>
  <li> <a tabindex=0 href="#"> Contact us</a></li>
  <li> <a tabindex=0 href="#">Products</a></li>
  <li> <a tabindex=0 href="#"> Services</a></li>
</ul>

这个例子可以帮助你理解逻辑。但是，如果您的链接重定向到新 URL，则必须对其进行调整。

在这种情况下，当您加载新页面时，当前页面中的所有代码都消失了，您拥有的所有脚本将在新页面上再次运行。

此代码未经测试，因为我必须打开一个新页面，但您可以研究它以了解：

var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
})

您需要将页面的 url 与页面加载时的链接 url 进行比较。

推荐阅读