0

現在アクティブな URL に基づいて、ナビゲーション メニューで現在のリンクを強調表示したいと考えています。

私のナビゲーション メニューが純粋な CSS である場合、多くの解決策を見つけましたが、私のメニューは画像ベースであるため、アクティブなクラスはリンクごとに異なります。

誰かが私が使用できるものを提案できますか? 私は jQuery にまったく慣れていませんが、非常に便利で、私が学んだ中で最高の言語の 1 つです。

<div id="navbar">
    <ul class="navmenu">
        <li><a class="products" href="#"></a></li>
        <li><a class="services" href="#"></a></li>
        <li><a class="about-us" href="#"></a></li>
        <li><a class="contact-us" href="#"></a></li>
        <li><a class="directory" href="#"></a></li>
        <li><a class="blog" href="#"></a></li>
    </ul>
</div>

各aタグにはプリロードされた CSS 背景画像があり、すべてのクラスにはホバー機能があります。

4

2 に答える 2

0

CSS ベースのアプローチがうまくいかない理由はありません。私の考えでは、主に2つのアプローチがあります。

まず、親要素である fex にクラスを配置します。

<div id="navbar">
    <ul class="navmenu">
        <li><a class="products" href="#"></a></li>
        <!-- This is the current page -->
        <li class="current"><a class="services" href="#"></a></li>
        <li><a class="about-us" href="#"></a></li>
        <li><a class="contact-us" href="#"></a></li>
        <li><a class="directory" href="#"></a></li>
        <li><a class="blog" href="#"></a></li>
    </ul>
</div>

次に、次の CSS ルールを使用できます。

.current .products { /* ... */ }
.current .services { /* ... */ }
.current .about.us { /* ... */ }
.current .contact-us { /* .... */ }
.current .directory { /* ... */ }
.current .bloc { /* ... */ }

このソリューションを使用すると、エントリごとに異なるスタイルを使用できます。これは、画像の fex を変更する必要がある場合に適しています。

すべてのエントリに同じスタイルを使用する必要があり、要素に複数のクラスがあることに基づいている場合は、他のソリューションの方が簡単です。

<div id="navbar">
    <ul class="navmenu">
        <li><a class="products" href="#"></a></li>
        <!-- This is the current page -->
        <li><a class="services current" href="#"></a></li>
        <li><a class="about-us" href="#"></a></li>
        <li><a class="contact-us" href="#"></a></li>
        <li><a class="directory" href="#"></a></li>
        <li><a class="blog" href="#"></a></li>
    </ul>
</div>

対応する CSS は次のようになります。

.current { /* ... */ }
于 2013-06-23T13:01:50.150 に答える
0

#: の後の URL の部分を取得するには、javascript を使用できます。

window.location.hash

次に、jQuery を再度使用して、関連する要素を強調表示します。

var linkClass = window.location.hash;
$("."+linkClass).prop("class",linkClass+" highlight");

これは 1 つの方法にすぎません (最もエレガントではないかもしれません)。この場合、css は次のようになります。

.pageOne {

}  
.pageOne.highlight {

}

そしてあなたのHTMLは次のようになります：

<a href="pageOne.html#pageOne">Page One</a>
于 2013-06-23T12:43:26.653 に答える