Javascript 如何突出显示所选选项卡？

我有一组html制表符，选中时要突出显示这些制表符。我正在尝试使用jquery来实现这一点。但它似乎不起作用

$（函数（）{
setNavigation（）；
});
函数setNavigation（）{
var path=window.location.pathname；
路径=路径。替换（/\/$/，“”）；
路径=解码组件（路径）；
$（“.nav a”）。每个（函数（）{
var href=$（this.attr（'href'）；
if（path.substring（0，href.length）==href）{
$（this）.closest（'li'）.addClass（'active'）；
}
});
}

a{
颜色：#000；
文字装饰：无；
}
a:悬停{
文字装饰：下划线；
}
a:参观了{
颜色：#000；
}
.导航{
填充：10px；
边框：实心1px#c0；
边界半径：5px；
浮动：左；
}
李国荣先生{
列表样式类型：无；
浮动：左；
利润率：0.10px；
}
李娜先生{
文本对齐：居中；
宽度：55px；
浮动：左；
}
李海军，主动{
背景颜色：绿色；
}
李海军{
颜色：#fff；
字体大小：粗体；
}

|


|


|

点击事件即可实现：

$（文档）。在（“单击”，“ul li”，函数（）上）{
$（'ul li'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
a{
颜色：#000；
文字装饰：无；
}
a:悬停{
文字装饰：下划线；
}
a:参观了{
颜色：#000；
}
.导航{
填充：10px；
边框：实心1px#c0；
边界半径：5px；
浮动：左；
}
李国荣先生{
列表样式类型：无；
浮动：左；
利润率：0.10px；
}
李娜先生{
文本对齐：居中；
宽度：55px；
浮动：左；
}
李海军，主动{
背景颜色：绿色；
}
李海军{
颜色：#fff；
字体大小：粗体；
}




|


|


|


html：

<ul class="nav">
    <li><a onclick="add_select(this);" href="#tab1">tab1</a>
    </li>
    <li>|</li>
    <li><a onclick="add_select(this);" href="#tab2">tab2</a>
    </li>
    <li>|</li>
    <li><a onclick="add_select(this);" href="#tab3">tab3</a>
    </li>
    <li>|</li>
    <li><a onclick="add_select(this);" href="#tab4">tab4</a>
    </li>
</ul>

添加定义哪个选项卡处于活动/单击状态的运算符类

HTML

<ul class="nav">
    <li><a href="#tab1" class="active">tab1</a>
    </li>
    <li>|</li>
    <li><a href="#tab2">tab2</a>
    </li>
    <li>|</li>
    <li><a href="#tab3">tab3</a>
    </li>
    <li>|</li>
    <li><a href="#tab4">tab4</a>
    </li>
</ul>

这与另一个几乎相同（只是某个家伙，我会添加一条评论，但我没有声誉点。事实上是负面的），但对.nav类更为具体，因此您不会向所有ul li元素添加事件，而只向.nav类下的元素添加事件

如果你的标签不仅仅是静态的，你也可以使用on

$(".nav li a").click(function() {
  $(".nav li").removeClass("active");                                     
  $(this).parent().addClass("active");
});

这就是您需要的所有jQuery/javascript：

$('.nav a').click(function() {  // Hook up to the click event on your .nav anchors
    $('.nav li').removeClass('active');  // Clear any existing active <li>'s
    $(this).parent().addClass('active');  // Apply the active class to the <li> parent of the clicked <a>
});

$（'.nav a'）。单击（函数（）{//连接到.nav锚点上的click事件
$（'.nav li'）.removeClass（'active'）；//清除任何现有的活动

$（this）.parent（）.addClass（'active'）；//将活动类应用于单击的
});

$（函数（）{
setNavigation（）；
});
函数setNavigation（）{
var path=window.location.pathname；
路径=路径。替换（/\/$/，“”）；
路径=解码组件（路径）；
$（“.nav a”）。每个（函数（）{
var href=$（this.attr（'href'）；
if（path.substring（0，href.length）==href）{
$（this）.closest（'li'）.addClass（'active'）；
}
});
}
a{
颜色：#000；
文字装饰：无；
}
a:悬停{
文字装饰：下划线；
}
a:参观了{
颜色：#000；
}
.导航{
填充：10px；
边框：实心1px#c0；
边界半径：5px；
浮动：左；
}
李国荣先生{
列表样式类型：无；
浮动：左；
利润率：0.10px；
}
李娜先生{
文本对齐：居中；
宽度：55px；
浮动：左；
}
李海军，主动{
背景颜色：绿色；
}
李海军{
颜色：#fff；
字体大小：粗体；
}




|


|


|


您对url匹配的期望是什么？匹配href的哈希会出现在url中吗？实际上，这里的人提交的答案符合我的要求。但是，如果我试图从每个
元素加载此url，并且每次传递的参数都不同，并且我想突出显示加载的选项卡（url），该怎么办。这里给出的代码似乎不适用于此。我想将指向url的类添加到li，这正是我所期望的，所以使用
location.hash
并匹配href that waylocation.hash，当我以
url？data=a
调用链接时，有时
url？data=a；col=1；col2=alpha
，我只想知道param数据包含哪些内容。好吧，这就是我询问url的原因。解析
位置。然后搜索
。你还可以找到许多关于如何转换
位置的帖子。搜索
到一个对象。除了链接到小提琴，为什么不使用代码片段？@leetylor我不知道如何制作一个。我在发布代码时遇到了很多麻烦。而且拉小提琴更容易更快，明白了！我从来没有注意到那边的代码片段图标。谢谢
$(".nav li a").click(function() {
  $(".nav li").removeClass("active");                                     
  $(this).parent().addClass("active");
});

$('.nav a').click(function() {  // Hook up to the click event on your .nav anchors
    $('.nav li').removeClass('active');  // Clear any existing active <li>'s
    $(this).parent().addClass('active');  // Apply the active class to the <li> parent of the clicked <a>
});