Question

我正在尝试使用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>

使用文本MENU，MENU 1，MENU 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>

Answer 1

不确定您是否对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>

Javascript在图像上悬停问题

1 个答案: