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>

テキスト 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>
4

1 に答える 1

0

jquery を使用できるかどうかはわかりませんが、ここに非常に簡単な解決策があります。また、ここにjsfiddleがあるので、実際の動作を確認できます。

jQuery:

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

コードの残りの部分は同じままです。もちろん、ドキュメントの head に jquery ライブラリを含める必要があります。

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