0

小さな画像であるjavascriptでメニュー対応のアンカーを選択したいのですが、クリックすると背景のクラスが変更されてメニューが強調表示されます。変更クラスは機能します。document.onclick を試してみましたが、機能しますが、特定の wrapper>nav> a.menu-enabled にしようとすると、選択されません。私はもう試した：

var menu = document.getElementById('nav'); 
var anchor = menu.getElementsByTagName('a');

テストのためだけにすべてのリンクをクリックできるようにしましたが、うまくいきませんでした。

私はもう試した：

var anchor = menu.getElementsByClassName('menu-enabled');

その後

anchor.onclick...` but still no result :(

jqueryを使用してみ
$("a.menu-enabled").onclick = function() ましたが、まだ結果はありません

現在、完了するまでドキュメントの任意の場所をクリックするように設定されています。

    <script>
    document.onclick = function() {
    $(".overlay").toggleClass("overlay-show");
    } 
    </script>


<div id="wrapper">
        <div class="logo">
                <a href="index.html">Tro</a>
            </div>
        <nav id="nav" class="menu-icon">
                <a class="menu-enabled">&nbsp;</a>
                <a class="link-enabled" target="_blank">&nbsp;</a>
                <a class="prev-disabled">&nbsp;</a>
                <a class="next-disabled">&nbsp;</a>
                <a class="back-disabled">&nbsp;</a>
            </nav>
            <div class="overlay">
        <nav class="meniu">
                <a href="#1">Link 1</a>
                <a href="#2">Link 2</a>
                <a href="#3">Link 3/a>
                <a href="#4">Link 4</a>
            </nav>

編集 1: フィドルhttp://jsfiddle.net/bFXZj/

編集 2: OK、問題はボタンをクリックできなかったことだと思います。別の方法で試してみましたが、うまくいきました。z-index が問題だと思います。すぐに答えが返ってきます。

編集 3: アンカーに背景を与えたからでしょうか?

nav.menu-icon a.menu-enabled{
    background: url(http://www.xxx.xx/menu.png) no-repeat 0 0;
    background-size: 24px 24px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    opacity: 1;
    visibility: visible;
    z-index: 99;
}
4

2 に答える 2