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/

MenuBar使用Javascript和css

1 个答案: