1

サイトでのユーザーのナビゲーションを支援するソリューションに取り組んでいます。現在、ナビゲーション バーの下にブレッドクラム ナビゲーション バーがあり、ユーザーがいるサイトの現在のセクションへのフル パスが表示されます。

スクリプトを作成するか、CSS ルールを使用してナビゲーション バーのタブの下にマーカーを表示し、ユーザーがどのセクションにいるのかを示したいと考えています。これを達成するために使用できる一般的な方法について、誰かが私にアドバイスしてもらえますか?

各タブの下に表示する矢印マーカーとして小さな .png を使用していることに注意してください。

4

1 に答える 1

3

このように：デモ

HTML：

<ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>​

CSS：

.active {
       background:#ccc url(path/to/image/marker.png) center bottom no-repeat; 
}

マーカーをクリックされたリンクに切り替えるには、jQuery/Javascriptなどのスクリプト言語を使用する必要があります

jQueryソリューション：

$("ul li a").on('click', function(e){
   e.preventDefault();
   $(this).closest('li').addClass('active').siblings().removeClass('active')
});​
于 2012-09-06T04:54:40.233 に答える