Question

我是javascript / jQuery的新手，如果页面的网址与三个字符串中的一个不匹配，我会尝试将css类添加到元素中。我无法使用这些代码行。

  if (window.location.href.match(/(interests|ideas|art)/) > -1) {
    jQuery("#nav-about").addClass('active');
  }

有什么想法吗？我的语法不正确吗？

修改

似乎每个人都给我的答案应该是有效的，但事实并非如此。也许我的代码的其他行是冲突的：

$(document).ready(function() {
  if (window.location.href.search(/(interests|ideas|art)/) > -1) {
      jQuery("#nav-about").addClass('active');
  }
  if (window.location.href.match(/(interests)/) != null) {
    jQuery("#nav-interests").addClass('active');
  }
  if (window.location.href.match(/(ideas)/) != null) {
    jQuery("#nav-ideas").addClass('active');
  }
  if (window.location.href.match(/(art)/) != null) {
    jQuery("#nav-art").addClass('active');
  }
});

我的网站是benxd.me。此主页上的链接#nav-about需要类active;该脚本在此页面上不起作用。其他页面上的剧本，兴趣，想法和摄影作品。

Answer 1

对于您正在做的事情，您希望使用.search()而不是.match()。 .search()的返回值是第一个匹配的索引，如果没有匹配则返回-1。 .match()的返回值为：

Array包含整个匹配结果和任何括号捕获的匹配结果; null如果没有匹配项。

修复上述问题，并且假设您已声明要在匹配的URL时添加该类，则代码应为：

if (window.location.href.search(/(interests|ideas|art)/) === -1) {
    jQuery("#nav-about").addClass('active');
}

Answer 2

您可以在js中使用string.search或string.indexOf方法。这是一个示例代码。

var url = 'http://localhost:3000/interests';
var url1 = 'http://localhost:3000/ideas';

if (url.search('interests') > -1) {
  // do your work
}

或

if (url1.indexOf('ideas') > -1) {
  // do your work
}

这是你的小提琴。

https://jsfiddle.net/Refatrafi/grxpmaon/3/

Answer 3

我使用以下函数执行相同的基本过程。

function NavSetActiveLink() {
    var currentLocation = window.location.pathname;
    $(".nav-element a").each(function(){
        if ($(this).attr('href') === currentLocation){
            $(this).addClass('active');
            return false; // break out of the loop
        }
    });
}

该函数循环显示每个.nav-element a，并找到第一个<a>，其href与当前window.location.pathname匹配，假定相对链接。

只要您的导航元素与每个导航元素直接相关的<a>标记，即父母或儿童或自我，您就可以使其工作。

如果window.location.href与某个字符串不匹配，请将css类添加到element

3 个答案: