0

window.location.pathnameに応じてリンクにクラスを追加したい

私たちのhtmlは：

  <nav>
    <a href="index.php">Home</a>
    <a href="company.php">Company</a>
    <a href="products.php">Products</a>
    <a href="technical.php">Technical</a>
    <a href="services.php">Services</a>
    <a href="contactus.php">Contact Us</a>
  </nav>

ドキュメントのURLはwww.nicadpower.com/index.phpなので、

var page_name = window.location.pathname.substring(1);

パス名が「index.php」であることを取得/認識した後、jqueryに実行させたいのは、「page_name」をhrefと比較するトリックであり、等しい場合はclass="current"を追加します。

HTMLコードを次のようにします

  <nav>
    <a href="index.php" class="current">Home</a>
    <a href="company.php">Company</a>
    <a href="products.php">Products</a>
    <a href="technical.php">Technical</a>
    <a href="services.php">Services</a>
    <a href="contactus.php">Contact Us</a>
  </nav>
4

2 に答える 2

4

これにはJavaScriptはまったく必要ないかもしれません。最後の例を参照してください。

あなたは「属性がセレクターに等しい」、またはおそらく「属性がで終わる」セレクター を探しています。いいえ、等しいセレクターは機能します：

// The equals selector
$('nav a[href="' + page_name + '"]').addClass('current');

// The ends-with selector
$('nav a[href$="' + page_name + '"]').addClass('current');

「属性がセレクターに等しい」はCSS2.1であり、広くサポートされているため、JavaScriptを使用せずに、スタイルシートを使用するだけでこれを実行できる可能性があります。エンドウィズセレクターはCSS3であり、おそらく十分にサポートされていません。古いブラウザーをサポートする必要がある場合は確かにそうではありません。

これは、jQueryとCSSの両方を使用したページの例です。「属性が等しい」セレクターを使用するCSSバージョンは、IE7以降、Firefox、Chrome、Opera、およびSafariで正常に機能します。（CSSビットはIE6では機能しません。クエルショックです。）

于 2011-06-18T08:23:58.763 に答える
3 
$("a[href='" + page_name + "']").addClass("current");

aこれにより、必要な属性値を持つ要素が選択されhref、それにクラスが追加されます。ここでフィドルの例を参照してください。

于 2011-06-18T08:25:01.827 に答える