2

私はこれについてすべてオンラインで読みましたが、それ以外はすべて非常に複雑で、部分文字列などを使わずに読める単純なコードを実装したいだけなので、これは初心者にとっては良い挑戦になると思いましたjqueryで。私はこのコードを思いつきましたが、成功しませんでした。

HTML

<ul id="nav">
    <li><a href="/" id="home" class="lettering">HOME</a></li>
    <li><a href="/about" id="about" class="lettering">ABOUT</a></li>
    <li><a href="/works" id="works" class="lettering">WORKS</a></li>
    <li><a href="/contact" id="contact" class="lettering">CONTACT</a></li>
</ul>

jQuery

$(document).ready ( function(){
    var path = window.location.pathname;
    $('#nav li a').each(function() {
        if( path = ("/"+this.id+"/") ){
            this.addClass('active');
        } else {
            ('#home').addClass('active');
        }
    })
})

皆さんが私を非難しないことを願っています。私の意図は、結果を得ることではなく、純粋に学術的なものです。ここで何が問題なのですか？エラーログなどは何も取得していません。

編集：末尾のスラッシュを削除し（Justinに感謝）、Phrogzが提案したことも試しましたが、うまくいきませんでした. 挑戦したい人は、@ egegorgulu.com にアクセスしてください。

4

3 に答える 3

3

js では、パスに末尾のスラッシュが追加されていますが、タグの href には末尾のスラッシュがありません。したがって、サーバーが末尾のスラッシュを追加しない限り、これらのパスは決して一致しません。

于 2012-01-19T00:15:17.157 に答える
2

私が見つけることができるあなたのJavascriptのいくつかの間違いがあります。

主に、内がDOM要素オブジェクトを参照していることを知る必要があるため、そのオブジェクトでjQueryメソッドを呼び出すには、jQuery関数に渡す必要.each()があります。thisthis$(this)

したがって、代わりに次のことを試してください。

$(document).ready ( function(){
    var path = window.location.pathname;
    $('#nav li a').each(function() {
        if( path === "/"+this.id ){ // EDIT: This was the problem with the if
            $(this).addClass('active'); // "this" is a DOM element, not a jQuery object
        } else {
            $('#home').addClass('active'); // you missed the $
        }
    }); // always get in the habit of being explicit with your semicolons
});

編集：あなたの問題は、比較演算子（型変換との同等性）/ （同じ型との同等性）の代わりにif代入演算子を使用したことでした。私はそれに対処するために上記のコードを編集しました。======

filter()編集2：さて、jQueryの関数を利用hrefして要素の属性を利用<a>し、一致するものを見つける新しいアプローチを試してみましょう。

$(document).ready ( function(){
    var path = window.location.pathname;
    var $navLinks = $('#nav li a');
    $navLinks.removeClass('active'); // start with a blank slate
    $navLinks.filter(function() {
        return path.indexOf(this.href) === 0; // test if the pathname starts with the current link's href attribute
    }).addClass('active'); // find a matching link to add the class to where the href attribute starts with the pathname
    if ($navLinks.filter('.active').length === 0) { // if nothing matches
        $('#home').addClass('active'); // make the home link active as a default
    }
});

学者としては、jQueryの強力な連鎖構文とJSの知識を利用して、必要に応じてこれをさらに圧縮し、次のように小さくできることに注意してください。

$(document).ready ( function(){
    if (!$('#nav li a').removeClass('active').filter(function() {
            return window.location.pathname.indexOf(this.href) === 0;
        }).addClass('active').end().filter('.active').length) {
        $('#home').addClass('active'); // make the home link active as a default
    }
});

短いが理解しにくいコード（これもテストされていませんが）はどうですか？

于 2012-01-19T00:52:07.597 に答える
0

誰かがさまよっている場合、私はこれのために次の関数を思いつきました。GregL の指摘に感謝します。それは私を大いに助けてくれました。

jQuery.noConflict()( function(){
    var $ = jQuery;
    var path = window.location.pathname;
    $('#nav li a').each(function() {
        if( path === "/" + this.id + "/" ){ 
            $(this).addClass('active'); 
        } else if( path === "/" ) {
            $('#home').addClass('active'); 
        }
    }); 
});

noConflict の理由は、連絡先ページに埋め込まれた連絡先フォームを使用しているためです。そして、2番目の if は不要だと確信していますが、適切に機能するようになったら削除したくありませんでした。

于 2012-01-24T12:49:37.293 に答える