Question

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>

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

Answer 1

您可以使用 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 进行比较。

Answer 2

您可以通过 js 执行此操作，并在清除其他属性的同时为单击的元素提供数据属性。在您的 css 中，您为具有此属性的元素指定指定的背景色

CSS

li[data-active=true]{
/*do stuff*/
}
li[data-active=false]{
/*reset colors*/
}

JS

//assuming you use jQuery, but you can easily translate it to native javaScript

$("li").click(function(){
    $("li").attr("data-active", "false")//reset all
    $(this).attr("data-active", "true")// set attr to the one clicked
})
//pure javaScript

let b= document.querySelectorAll("li")
for (a in b){
a.addEvenetListener("click", function(){
    let b= document.querySelectorAll("li")
for (a in b){ a.dataActive,="false"}//reset all
    this.dataActive="true"// set attr to the one clicked
})
}

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

2 个答案:

CSS

JS