Question

我需要使用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样式而不是类，因为它会使其他事情变得更简单。

Answer 1

为什么不想更改样式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>

嵌套div时突出显示当前页面选项卡

1 个答案: