Question

我有以下菜单。

<ul id="nav" class="grid_16">
    <li><a href="#">FORSIDE</a></li>
    <li><a href="#">MOBIL</a></li>
    <li><a href="#">PC OG SERVERE</a></li>
    <li><a href="#">TJENESTER</a></li>
    <li><a href="#">DIVERSE</a></li>
    <li><a href="#">OM OSS</a></li>
    <li><a href="#">KONTAKT</a></li>
    <li><a href="#">NETTBUTIKK</a></li>

</ul>

如果有空格，则网址路径将低于分数_。例如，PC OG SERVERE将是

 http://www.mywebsite.no/PC_OG_SERVERE.asp

DIVERSE将

http://www.mywebsite.no/DIVERSE.asp

我想在带有jquery的列表中添加class =“active”。例如，当你在http://www.mywebsite.no/OM_OSS.asp

时

 .....
 .....
 <li class="active"><a href="#">OM OSS</a></li>
 ....

我该怎么做？

提前致谢。

Answer 1

你可以这样做：

var text = window.location.href.match(/http:\/\/www\.mywebsite\.no\/(.+)\.asp/)[1].replace(/_/g,' ');
$("#nav li").filter(function() {
  return $.text([this]) == text;
}).addClass("active");

您可以更改正则表达式等...但概念是相同的，获取文本，将其与每个<li>的文本进行比较（因为<a>没有添加，您可以在<li>上做得对。对于很多旧版本的jQuery，您需要使用.text()而不是上面的快捷方式，如下所示：

$("#nav li").filter(function() {
  return $(this).text() == text;
}).addClass("active");

注意我们不在这里使用:contains()，我们正在进行完全匹配，而不是子字符串。

Answer 2

你可以尝试类似

的内容

$("#nav li a").each(
  function(){
    // Could be that you have to use $(this). Not sure.
    if (this.text() == 'DIVERSE'){
      this.addClass('active');
    } 
  }
);

但我认为最好在服务器端代码中生成这个类。

Answer 3

var pathComponents = window.location.pathname.split("/");
var fileName = pathComponents[pathComponents.length - 1];
var documentName = fileName.substr(fileName.length - 4).replace("_", " ");

$('#nav li a:contains(' + documentName + )').parent().addClass('active');

如何在url具有相同传递的菜单中添加活动类

3 个答案: