0

jquery を使用して、現在のページのタブを強調表示する必要があります。通常、私が知っている数行のコードを使用する単純なタスク。ただし、ツールバーがあり、スパンで行っているため、タブは通常のものではありません。タブのスパンはリンクの内側にあるため、タブとその中のテキストをクリックできます。ツールバーにリンクされているタブが 2 つしかないので、jquery で if else ステートメントを使用して、ユーザーがどのページにいるのか、したがってどのタブを強調表示するのかを判断することを考えていましたが、その方法がよくわかりません。

タブのマークアップは次のとおりです。

 <a href="Home">
     <span class="navButton" title="Return Home">
         Home
     </span>
 </a>
 <a href="Discover">
     <span class="navButton" title="Discover The Unsigned">
          Discover
     </span>
 </a>

現時点で機能しないjqueryは次のとおりです。

 $(function(){
     var path = location.pathname.substring(1);
     if ( path )
     $('#navButton a[href$="' + path + '"]').css ('box-shadow', 'inset 0 0 10px #000000');
 });

注: クラスではなく css スタイルを追加することで、他のことをよりシンプルに保つことができます。

4

1 に答える 1

0

スタイルを変えてみませんonClick()か？そのように：

$("#navButton a").click(function() {
    $(this).css('box-shadow', 'inset 0 0 10px #000000');
});

またはさらに良いことに、CSS クラスを作成できます。

.activeTab {box-shadow: inset 0 0 10px #000000;}

そして、現在アクティブなタブに応じて、追加/削除します:

$("#navButton a").click(function() {
    $(".activeTab").removeClass("activeTab");
    $(this).addClass("activeTab");
});

場所に基づく:

$(function() {
    var url = window.location.path;
    $('$navButton a[href="' + url + '"]').addClass("activeTab");
});

そして、リンクは次のようになります。

<a href="'/someDirectory/one.html'">One</a>
<a href="'/someDirectory/two.html'">Two</a>
于 2012-08-11T18:44:59.053 に答える