gpt4 book ai didi

javascript - 使用 Javascript 和 css 的菜单栏

转载 作者:行者123 更新时间:2023-11-28 08:16:49 25 4
gpt4 key购买 nike

您好,我正在尝试使用 CSS 和 Javascript 制作水平菜单栏。单击时,我希望菜单项的背景变为黑色。这是 HTML 代码的一部分-

<ul id="top_menu">
<li onclick="arrow(this)"><a href="#">item no 1</a></li>
<li onclick="arrow(this)"><a href="#">item no 2</a></li>
<li onclick="arrow(this)"><a href="#">item no 3</a></li>
<li onclick="arrow(this)"><a href="#">item no 4</a></li>
<li onclick="arrow(this)"><a href="#">item no 5</a></li>
</ul>

JavaScript 部分-

function arrow(x){
x.style.background="#000000";
}

现在当有人点击菜单时,背景变黑。问题是当选择(点击)任何其他元素时,先前选择的元素不会恢复到其原始背景颜色。我应该如何实现此功能?谢谢!

最佳答案

有几种方法...这对我来说是最简单的:

function arrow(x){


var ul = document.getElementById('top_menu');

list=ul.getElementsByTagName("li");

for(i=0;i<list.length;i++){

if(list[i]!==x){
list[i].style.background="#ffffff";
}
else {
list[i].style.background="#000000";
}
}



}

演示:http://jsfiddle.net/ag9L09sb/1/

关于javascript - 使用 Javascript 和 css 的菜单栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28948910/

25 4 0