1

我正在尝试使用 javascript 创建效果。

影响：

当我单击任何菜单时，它会显示symb1.png的活动图像。以下是我的代码：

CSS：

<style>
    li{display:inline;padding:0 10px; z-index:-1;}
    .red{ background-image:url('symb1.png'); background-repeat:no-repeat;}
</style>

正文标签中的 HTML

<ul id="menu">
    <li><a href="#" class="red" onClick="selected(this)">MENU</a></li>
    <li><a href="#" onClick="selected(this)">MENU 1</a></li>
    <li><a href="#" onClick="selected(this)">MENU 2</a></li>
</ul>

最后是关闭html body标记之前的 Javasript 代码：

<script>
    function selected(obj){
        var lilist = document.getElementById('menu');
        var alist = lilist.getElementsByTagName('a');
        for (i=0; i<alist.length; i++ )
        {
           alist[i].className="";
        }
        obj.className="red";
    }
</script>

它适用于文本菜单、菜单 1、菜单 2 等。但如果我放置任何图像而不是文本，则它不起作用。它不显示活动图像。为什么会这样？

更新：

<html>
<head>
<style type="text/css">
li{display:inline;padding:0 10px; z-index:-1;}
.red{ background-image:url(symb1.png); background-repeat:no-repeat;}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#" class="red">MENU</a></li>
<li><a href="#" onClick="selected(this)">MENU 1</a></li>
<li><a href="#" onClick="selected(this)">MENU 2</a></li>
</ul>
<script>
$('ul li a').click(function(){
 $('ul li a').removeClass('red');
$(this).addClass('red'); 
});
</script>
</body>
</html>
4

1 回答 1

0

不确定您是否对 jquery 持开放态度，但这是一个非常简单的解决方案。此外，这是一个jsfiddle，因此您可以看到它的实际效果：

jQuery：

$(document).ready(function() {
    $('ul li a').click(function(){
        $('ul li a').removeClass('red');
        $(this).addClass('red'); 
    });
});

您的其余代码保持不变。当然，您需要在文档的头部包含 jquery 库：

<script src="//http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
于 2013-05-13T17:51:51.620 回答