3

ページの各目次を含むUL要素を含むdivがあります。

現在、アクティブな要素（class = "active"）に特別なクラスをハードコーディングする必要があります。ただし、hrefをブラウザの現在のURLと照合することで、CSS3を使用して作業を実行できるかどうかを確認しようとしています。

たとえば、toc divのアンカーのhrefがページの現在のURLと一致する場合は、それに特別なフォーマットを追加します。

URLの例：http：//mysite.com/page-title/2

マークアップ：

<div class="toc">
    <h3>Table of Contents</h3>
    <ul>
        <li><a href="http://mysite.com/page-title/">Part 1</a></li>
        <li><a href="http://mysite.com/page-title/2">Part 2</a></li>
        <li><a href="http://mysite.com/page-title/3">Part 3</a></li>
    </ul>
</div>

上記の例では、2番目のリストアイテム要素に特別なcssフォーマットを適用します。これは、そのHREFパターンがURLパターンと「/2」一致しているためです。

これがCSSで実行できない場合、jQueryコードを提供できれば、jQueryスクリプトに配置できます。

4

2 に答える 2

6

jQuery では、次のようなものが機能するはずです。

var urlString = window.location; // or try window.location.pathname

$('a[href="' + urlString + '"]').addClass("active");
于 2012-12-22T21:45:53.283 に答える
1

ここでは JavaScript は必要ありません。現在のページに対応する body タグにクラスを追加し、同じクラスをナビゲーション項目に追加するだけです。次に、一致したセットの CSS ルールを次のように作成します。

<body class="products">
<div class="toc">
    <h3>Table of Contents</h3>
    <ul>
        <li><a href="http://mysite.com/page-title/" class="products-nav">Product Overview</a></li>
        <li><a href="http://mysite.com/page-title/2" class="home-nav">A More Dynamic Home Page</a></li>
        <li><a href="http://mysite.com/page-title/3" class="images-nav">Featured Images on Steroids</a></li>
    </ul>
</div>

と

<body class="home">
<div class="toc">
    <h3>Table of Contents</h3>
    <ul>
        <li><a href="http://mysite.com/page-title/" class="products-nav">Product Overview</a></li>
        <li><a href="http://mysite.com/page-title/2" class="home-nav">A More Dynamic Home Page</a></li>
        <li><a href="http://mysite.com/page-title/3" class="images-nav">Featured Images on Steroids</a></li>
    </ul>
</div>

等 その後：

.products .products-nav, .home .home-nav, .images .images-nav {
    font-weight: bold;
}
于 2012-12-22T21:49:13.220 に答える