1

サイトのナビゲーションを完成させようとしています。jsfiddle コードを添付して、現在のコードを示します。私の問題は、子リンクが想定どおりに灰色になることですが、その灰色をクリックするとトップレベルのリンクも作成したいと考えています。ページにラベルを付ける方法は次のとおりです

ページ1 ページ 1aページ
1b ページ2 ページ 2a . . . 等。







サブレベルのように、ページ 1 とページ 2 を灰色にする必要があります。誰かがこれで私を助けることができれば、私は本当に感謝しています. お時間をいただきありがとうございます。

http://jsfiddle.net/gUmYP/

<script type="text/javascript">
    $('#body').ready(function(){
            var URL = location.pathname.split("/");

            URL = URL[URL.length-1];
            //<![CDATA[
            for(var i = 0; i < 11; i++){ // 4 = number of items, if you add more increase it, make number 1 larger than total items.
                if ((URL.indexOf(i) != -1) && (!$('#i'+i).is(':visible'))) {
                    $('#nav ul:visible').slideUp('normal');
                    $('#i'+i).slideDown(0);
                    $('#i'+i)
                        .find('li')
                        .each( function() {
                            var current = $(this).find('a')[0];
                            if (current.href == window.location.href)
                                current.style.backgroundColor = "#ccc";

                            current.style.color = "#006";
                        });
                }
            }
        });
</script>

残念ながら、以下の回答のどれも私の問題を解決していません。親リンクが強調表示されるようにした人もいますが、他の機能が正しく機能しません。すべての上にカーソルを置いたときにメニューを黄色で強調表示する必要があり、サブメニューがアクティブでない場合でも水色である必要があり、すべてのアクティブなリンク (親または子) がアクティブであることを灰色のハイライトで表示する必要があります。リンク。これらの問題をすべて解決する解決策を知っている人はいますか?

この問題の答えは、この投稿で見つけることができます... 子リンクだけでなく、親リンクでも動作する JavaScript メニューのアクティブ リンク

4

3 に答える 3

1

jQuery が複雑すぎるように見えたので、私はあなたの jQuery を作り直しました。この jsfiddle の結果を見て、それが目的かどうか教えてください!

$("#nav > li").click(function () {
    if ( $(this).hasClass("selected") ) {
        $(".selected").removeClass("selected");
    } else {
        $(".selected").children("ul").slideToggle();
        $(".selected").removeClass("selected");
        $(this).addClass("selected");
    }
    $(".selected").children("ul").slideToggle();
});

http://jsfiddle.net/PBKxy/

于 2013-07-24T13:37:39.457 に答える
0

あなたはこのようにすることができます： http://jsfiddle.net/gUmYP/16/

$('#nav li a').each(function(){
            $(this).css('backgroundColor', '#006');
            $(this).css('color', '#CCC');
        });
        $(this).css('backgroundColor', '#ccc');
        $(this).css('color', '#066');
于 2013-07-24T13:38:24.543 に答える
0

どのメニュー項目がいつ再色付けされるかを決定する制御ロジックを確認する必要があると確信しているため、実際に以下の色を変更するようにコードを変更しただけです。これは、メニュー項目 #2 にハードコードされた効果を示すフィドルです。

location.pathnamea で終わる場合は、おそらく の代わりに/要素を参照したいことに注意してください。URL[URL.length-2]URL[URL.length-1]

<script type="text/javascript">
    $('#body').ready(function(){
            var URL = location.pathname.split("/");

            URL = URL[URL.length-1];
            //<![CDATA[
            for(var i = 0; i < 11; i++){ // 4 = number of items, if you add more increase it, make number 1 larger than total items.
                if ((URL.indexOf(i) != -1) && (!$('#i'+i).is(':visible'))) {
                    $('#nav ul:visible').slideUp('normal');
                    $('#i'+i).slideDown(0);
                    $('#i'+i)
                        .find('li')
                        .each( function(idx, ex) {
                            var current = $(ex).find('a');
                            if (current.href == window.location.href) {
                                current.css({
                                      backgroundColor: '#ccc'
                                    , color:           '#006'
                                });
                                $('#i'+i).prev('a').css({
                                      backgroundColor: '#ccc'
                                    , color:           '#006'
                                });
                            }
                        });
                }
            }
        });
</script>
于 2013-07-24T14:04:54.177 に答える