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

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给被点击的元素一个data- attribute，同时清除其他属性。在css中，为具有此属性的元素指定background-color

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
})
}