4

次のリンクを含むメニューバーがあります。

<div class="menu">
<ul>
  <li><a href="aboutus.php" onclick="changecss(1)">About Us</a></li>
  <li><a href="services.php" onclick="changecss(2)">Services</a></li>
  <li><a href="career.php" onclick="changecss(3)">Career</a></li>
  <li><a href="contactus.php" onclick="changecss(4)">Contact Us</a></li>
</ul>
</div>

メニューバーで現在のページのリンクをアクティブにしたい。だから私はaddclassメソッドを使用しています..

$(".menu ul li a").click(function() 
{
  $(".menu ul li a").removeClass('selected');
  $(this).addClass('selected');
});

これらのコードはすべて、ヘッダー ファイルであるheader.htmlページにあります。他のすべてのページに php を使用してこのページを含めています。

問題は、メニューバーのリンクをクリックすると機能しますが、ページが (ページに)addclass読み込まれるまでにcss が機能しないことです。誰でも問題を解決するのを助けることができますか?hrefaddclass's

4

4 に答える 4

5

ドキュメントレディ方式を採用していますか？そうでない場合は、問題があります。jQuery コードを実行すると、DOM が完全にロードされません。次のようにコードを実行します。

$(function(){
    $(".menu ul li a").click(function() { 
        $(".menu ul li a").removeClass('selected'); 
        $(this).addClass('selected'); 
    });
});

...または...ページの下部 (body タグの直前) にある script タグでコードを実行するだけです。

サイド ノードとして:

$(function() {});

の略です

$(document).ready(function(){ ... });
于 2013-05-22T06:14:10.633 に答える
2

document.ready の下で試す

$(document).ready(function(){
    $(".menu ul li a").click(function() { 
        $(".menu ul li a").removeClass('selected');
        $(this).addClass('selected'); 
    });
     //Here defaulty add class for first link on page load like
    $(".menu ul li a:eq(0)").addClass('selected'); 
})
于 2013-05-22T06:15:53.983 に答える
1

ありがとうございます。

問題を解決しました。すべてのページにaddclassを含めました。そうしないと、読み込み時に機能しません。header.php
ファイルで は、現在のページの URL を変数ページに割り当て、ヘッダー ファイルを含むすべてのページでページ変数にアクセスできるようにしました。 

 $(document).ready(function(){`<br/> 
   if(page=="localhost/workspace/pjt/aboutus") {` <br/>
   $(".menu ul li a").removeClass('selected');` <br/>
   $(".menu ul li a#about").addClass('selected'); } });
于 2013-05-23T11:31:52.727 に答える