2

マスター ページに次のタブ付きナビゲーションを設定しています。

        <nav class="grid_12">
            <ul>
                <li><a href="#" class="selected">Home</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

たとえば、[ポートフォリオ] タブをクリックすると、ポートフォリオ ページが表示されたときに [ポートフォリオ] タブが強調表示されたままになるようにします。これを達成するための推奨される方法は何ですか?

他のいくつかの投稿を確認しましたが、それらの中で最も関連性の高いものは、個別のページではなく、例で div を使用しています。

4

1 に答える 1

3

あなたが持っている「選択された」クラス名が、あなたが話しているハイライトのスタイルを持っていると仮定します。ユーザーがこれらのリンクのいずれかをクリックした後、jquery を使用して、クリックされたアンカー タグに「選択された」クラスを追加できます。これをページの一番下の body タグの直前、またはメインの JavaScript ファイルに挿入します。

<script type="text/javascript">
    $(document).ready(function () {
        $(".grid_12 ul li a").click(function() {
            $(".grid_12 ul li a ").removeClass("selected");
            $(this).addClass("selected")
        })
    })
</script>

上記のコードは、ページの更新がなく、コンテンツの更新のみが行われる場合にのみ機能しますが、ページが更新されて新しいページに移動する場合は、次のようにします。

<nav class="grid_12">
    <ul>
        <li><a href="#" class="nav_home">Home</a></li>
        <li><a href="#" class="nav_portfolio">Portfolio</a></li>
        <li><a href="#" class="nav_blog">Blog</a></li>
        <li><a href="#" class="nav_contact">Contact</a></li>
    </ul>
 </nav>

特定のページのスタイルを追加します。たとえば、www.mySite.com/portfolio を使用している場合、ポートフォリオのみの CSS で次を追加します。

a.nav_portfolio{
    background-color:orage;
    ...
}

この方法では、JavaScript を実行する必要さえありません。

于 2012-04-23T23:25:18.233 に答える