1

インクルードのように、ファイルにヘッダーを含めました。ヘッダーにはナビゲーション バーがあります。

jQueryを使用class="active"して、関連するli.

私が考えることができる唯一の方法は、実際のページに変数を設定し、関連するページのその変数と等しい id を適用し、if 関数が一致する場合は、li にクラスを適用することです。

しかし、これを達成するためのもっと簡単な方法があるに違いないと思いました。

<ul class="nav nav-pills right" id="div">
    <li id="home" class="active">
       <a href="index.php">Home</a>
    </li>
    <li id="search">
       <a href="search.php">Search</a>
    </li>
    <li id="contact">
      <a href="contact.php">Contact</a>
    </li>
</ul>
4

7 に答える 7

3

よりコンパクトな方法：

$(function(){
    var sPath = window.location.pathname;
    var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
    $('a[href="'+ sPage +'"]').parent().addClass('active');
});
于 2013-01-18T23:04:07.957 に答える
3

これを行う簡単な方法は、ページごとにスクリプトを作成することです。

$('#home').addClass('active'); // for home page

hrefを現在のURLに一致させてみてください。

var path = window.location.pathname.substring(1);
$('.nav>li>a[href="' + path + '"]').parent().addClass('active');
于 2013-01-18T23:05:09.593 に答える
3

ページが読み込まれるとすぐに、次のコードが実行されます。

$(document).ready(function(){
    $('li').removeClass('active');
    $('li a').each(function() {
       $found = $.contains($(this).prop("href"),location.pathname);
       if ($found) {
           $(this).closest('li').addClass('active');
           break;
        }
    });
});

また

正規表現を使用してこれを行うこともできます：

$(document).ready(function(){
    $('li').removeClass('active');
     var regex = /[a-z]+.php/g; 
     var input = location.pathname; 
        if(regex.test(input)) {
           var matches = input.match(regex);
           $('a[href="'+matches[0]+'"]').closest('li').addClass('active');
        }
});

phpファイルと同様のID名が必要になる場合があります。

ここでデモを確認してください：デモ

于 2013-01-18T23:06:29.380 に答える
1

あなたはこれを行うことができます：

//remove the active class from all items, if there is any
$('.nav>li').removeClass('active');

//finally, add the active class to the current item
$('a[href='+ location.pathname.substring(1) +']').parent().addClass('active');
于 2013-01-18T23:12:02.990 に答える
0

JavaScript を使用して、DOM がロードされた後に右側のリスト項目にクラスを追加することにより、URL に基づいて現在のリスト項目を見つけることができます (例: JQuery セレクターおよび addClass() を使用した window.location の文字列操作)。

于 2013-01-18T23:13:19.620 に答える