4

こんにちは私はポートフォリオのウェブサイトを作成しようとしています。各ページのヘッダーを再作成する必要がないように、PHPinclude関数を使用してヘッダーを追加することにしました。私の唯一の問題は、リンクをクリックして別のページに移動したときに、アクティブなリンクがそれぞれ変更されないことです。
含まれているHTML

<ul id="main-menu">
     <li><a href="index.php" class="active">home</a></li>
     <li><a href="about.php">about us</a></li>
     <li><a href="portfolio.php">portfolio</a></li>
     <li><a href="contact.php">contact</a></li>
</ul>

Javascript：

 $(document).ready(function(){
    var $menu = $("ul#main-menu li a");                
    $menu.click(function(){
        $menu.each(function(){
            $(this).removeClass("active");
        });
        $(this).addClass("active");                  
    });
 });

問題は、ページが読み込まれるたびに、アクティブなクラスが最初のリンクにリセットされることです。私が知らないのは、アクティブなクラスをページマッチングリンクに動的に追加する方法です。

4

3 に答える 3

6

あなたはこれを必要とします：

  $(document).ready(function(){
        var i = document.location.href.lastIndexOf("/");
        var currentPHP = document.location.href.substr(i+1);
        $("ul#main-menu li a").removeClass('active');
        $("ul#main-menu li a[href^='"+currentPHP+"']").addClass('active');
  });
于 2012-07-08T17:50:00.453 に答える
1

ページと同じハイパーリンクを選択するページ読み込み時に実行される関数を作成してみてhrefください。

または、従来のページの場所の変更ではなく、AJAXを介してページのメインコンテンツをロードします。JQueryには優れたAJAX実装があります。オンラインで検索しますjquery ajax。

もう1つの方法は、ハイパーリンクをクリックしてCookieを作成し、Cookieを読み取って選択したCookieを設定することです。これは非常に信頼性が低いですが（戻るボタン、手動のURL入力など）。

于 2012-07-08T17:49:54.197 に答える
1

単純：

var link = document.location.href.split('/').slice(-1);   // retrieve page name
$('#main-menu li a.active').removeClass('active');        // remove class 'active'
$('#main-menu li a[href$="'+link+'"]').addClass('active');// and add it to a matching link

jsBinデモ

于 2012-07-08T18:02:25.707 に答える