0

我需要使用 jquery 突出显示当前页面的选项卡。一个简单的任务，通常只需要几行我知道的代码。但是，选项卡不是您常用的东西，因为我有一个工具栏并且使用跨度完成了它。选项卡的跨度位于链接内部，以便可以单击选项卡以及其中的文本。由于我只有两个选项卡是工具栏上的链接，因此我正在考虑在 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 回答