1

要求に応じて HTML を含めるように編集 - 完全な URL は保護されたステージング サーバー上にあるため投稿しても意味がないため削除しました

すべてのページに表示されるサブメニューが 1 回だけコーディングされるように構築された友人の Web サイトを修正しようとしています。

現在表示しているページのリンクにハイライトを追加できるようにしたいのですが、これをすべて 1 つの html スニペットで行う必要があります。そのため、以下のコードは、ナビゲーションに使用される html リストの前に配置されます。

現在のページを強調表示できないことを除いて、リストは正常にレンダリングされます (「アクティブ」タグは、ページをクリックしたときにのみ強調表示されます)。

「現在のリンク」フォーマットを別のファイルに追加することに関する他の投稿をいくつか読みましたが、残念ながら、このスニペットにすべてのコードを含める必要があります。

それを考えると、私が達成しようとしていることは可能ですか？

ありがとう

CSS:

<style>
    #navigation {
        color: #ffffff;
        font-family: Sans-Serif;
        height: 34px;
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
    }
    #navigation li a {
        color: #000000;
        display: block;
        font-size: 12px;
        font-weight: bold;
        padding: 10px 18px;
        text-decoration: none;
    }
    #navigation li a:hover {
        background-color: #b36521;
        color: #ffffff;
    }
    #navigation li a:active {
        background: #f1d74c;
        color: #ffffff;
    }
</style>

HTML:

<div id="submenu">
    <h3>Menu</h3>
    <ul id="navigation">

        <li><a href="http://URL/SOAP-BARS">Soap bars</a></li>

        <li><a href="http://URL/LIQUID-SOAP">Liquid soap</a></li>

        <li><a href="http://URL/BATH-BODY">Bath and body</a></li>

        <li><a href="http://URL/SKINCARE">Skincare</a></li>

        <li><a href="http://URL/4573204014/CANDLES">Candles</a></li>

        <li><a href="http://URL/GIFTS">Gifts</a></li>

        <li><a href="http://URL/FAVOURS">Favours</a></li>

        <li><a href="http://URL/BROWSE-BY-SCENT">Browse by scent</a></li>

    </ul>
</div>
4

1 に答える 1

12

http://www.w3schools.com/cssref/sel_active.asp

定義と使用法 :active セレクターは、アクティブなリンクを選択してスタイルを設定するために使用されます。

リンクをクリックすると、リンクがアクティブになります。

ナビゲーションで現在のページを強調表示するには、要素をアクティブなページ (現在のページ) としてマークするクラスを追加する必要があります。たとえば、あなたは

#navigation li a.current{
   color: #ffffff;
   background:#f1d74c;
}

そしてhtml

<div id="navigation">
    <li>
        <a ...> other page</a>
    </li>
    <li>
        <a class="current" ...>current page</a>
    </li>
</div>

ティムは、現在のページ リンクに current を追加する優れた方法を持っています。JavaScript を 1 行追加するだけです。

$("a[href*='" + location.pathname + "']").addClass("current");
于 2013-06-26T11:04:26.640 に答える