javascript - 使用 Javascript 和 css 的菜单栏

Question

您好，我正在尝试使用 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";
            }

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

Answer 1

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

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/