7

ユーザーが現在どのページを表示しているかを判断できるようにしたい。ユーザーが現在そのコンテキストを表示しているナビゲーションリンクに独自のスタイルを追加するという形の単純なインジケーター

これが私のスクリプトです。ifステートメントも機能しますが、addClass（）関数は何もしません。すべてのセレクターは正常に機能します。これが私のコードです。

<script>
$(document).ready(function(){
    var pathname = window.location.pathname;
    $("#links ul li a").each( function() {
        var href= $(this).attr("href");
        if (pathname.indexOf(href) >= 0){
            $(this).addClass("active");
        }
    } );
});
</script>


    <nav id="links">
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a>About</a></li>
        <li><a>Contact</a></li>
    </ul>
</nav>

HTML：

それを機能させました、これは私の最終的なコードです、何か改善の必要がありますか？

$(document).ready(function(){
    var pathname = window.location.pathname;
    var onDomain=true;
    $("#links ul li a").each( function() {
        var href= $(this).attr("href");
        if (href != undefined && pathname.indexOf(href) >= 0){
            $(this).addClass("active");
            onDomain=false;
        }
    });
    if (onDomain){
        $("#links ul li:first-child a").addClass("active");
    }
});
4

5 に答える 5

3

おそらく、アクティブなクラスをliに適用する必要があります。ロジックが正しく、クラスをliに適用する必要があると仮定します（htmlとcssがないとわかりません）。

if (pathname.indexOf(href) >= 0){
        $(this).parent().addClass("active");
}
于 2012-05-06T19:39:56.340 に答える
3

hrefに割り当てるa;

<nav id="links">
    <ul>
        <li><a href="index.php">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

次に、試してください：

   var pathname = window.location.pathname;
   $("#links ul li a").each( function() {
        var href= $(this).attr("href");
        if (href.length && pathname.indexOf(href) >= 0){
            $(this).addClass("active");
        }
    });

HTMLを変更できない場合は、次のようにしてみてください。

   var pathname = window.location.pathname;
   $("#links ul li a").each( function() {
        var href= $(this).attr("href");
        if (href != undefined && pathname.indexOf(href) >= 0){
            $(this).addClass("active");
        }
    });
于 2012-05-06T19:47:26.870 に答える
2 
var loc = ''+( $(location).attr('href').split('/').slice(-1) );
if( typeof loc !== 'undefined'){
    $("#links li").find("a[href='"+loc+"']").each(function(){
        $(this).addClass("active");
    });
}else( typeof loc === 'undefined' ){
    $("#links li a:eq(0)").addClass("active"); // if you use 'home' as your first.
}
于 2012-05-06T19:37:16.100 に答える
0

質問がまったくわからないのですが、次のようなものを選びます。

$("#links ul li a").filter( function() {
    return window.location.pathname.indexOf(this.href) != -1;
}).addClass('active');
于 2012-05-06T20:10:00.820 に答える
0 
<script type="text/javascript">

$(window).load(function() {
                  var url = window.location;
                    $('#nav a').filter(function() {
                        return this.href == url;
                    }).parents("li").addClass('active');

            });
</script>

メニューに外部ファイルを使用する場合は、このスクリプトを使用してください。

index.php inclide menu.phpのよう に、ロードされたURLを検出するこのscritp tuを使用し、クラスメニューをアクティブクラスに変更する必要があります。

Uthecodeparadoxに感謝しますあなたのコードは機能しています

于 2015-05-24T18:53:00.397 に答える