使用jQuery添加基于URL的类

我正在使用jQuery，并试图根据URL向菜单项添加一个类。我尝试了这个（在其他主题中可以找到），但无法让它正常工作。它将类添加到当前页面url之后的每个菜单项中

这是我的密码：

<script type='text/javascript'>
  $(document).ready(function(){
    $(function() {
        switch (window.location.pathname) {
            case '/p/about.html':
                    $('.nav-about').addClass('current')
            case '/search/blog':
                    $('.nav-blog').addClass('current')
            case '/p/design.html':
                    $('.nav-design').addClass('current')
            case '/p/photography.html':
                $('.nav-photography').addClass('current')
            case '/p/hosting.html':
                $('.nav-hosting').addClass('current')
        }
      });
  });
</script>

$（文档）.ready（函数（）{
$（函数（）{
开关（window.location.pathname）{
案例“/p/about.html”：
$（'.nav about'）.addClass（'当前'）
案例“/search/blog”：
$（'.nav blog'）.addClass（'当前'）
案例“/p/design.html”：
$（'.nav design'）.addClass（'当前'）
案例“/p/photography.html”：
$（'.nav photography'）.addClass（'当前'）
案例“/p/hosting.html”：
$（'.nav hosting'）.addClass（'当前'）
}
});
});

有人帮我纠正这个问题吗

谢谢

---

编辑：对于那些提问的人，我正在使用Blogger。我没有使用默认的“链接列表”，而是创建了自己的响应菜单。这里只有一个模板，所以我不能为每个HTML页面添加一个类。这必须通过jQuery来完成，因为Blogger不会向特定页面添加特定类。因此，我需要抓取URL，将适当的类应用于适当的菜单项。

您需要在每个案例之后进行

中断

，否则它将进入下一个案例

switch (window.location.pathname) {
    case '/p/about.html':
       $('.nav-about').addClass('current');
       break;
    case '/search/blog':
       $('.nav-blog').addClass('current');
       break;
    case '/p/design.html':
       $('.nav-design').addClass('current');
       break;
    case '/p/photography.html':
       $('.nav-photography').addClass('current');
       break;
    case '/p/hosting.html':
       $('.nav-hosting').addClass('current');
       break;
}

---

侧面点，这是重复的：

  $(document).ready(function(){
    $(function() {

---

这两个词的意思相同，请使用其中一个。

如果要添加

current

类的元素相对于当前页面的URL具有

href

值，则此方法可能会更简单。

你可以简化一下

假设您在下一页：

---

这里有一个关于jsbin的例子：

我将提出一个不同的建议。根据您给出的示例，很可能从URL本身提取elements类：

var url = window.location.pathname;
var elementName = url.match(/\/(\w+)\.?\/?$/);
$('.nav-' + elementName).addClass('current');

正则表达式匹配：

\/

-斜杠字符（需要转义）

（\w+）

-多个单词字符。这也被“捕获”并归还

\？

-文字点字符（也需要转义）。这是为了匹配文件扩展名的开头，如

.php

或

.html

。问号使它成为可选的

\/？

-文字斜杠字符（也需要转义）。这是为了匹配URL的尾随斜杠，如

/members/

。问号使它成为可选的

$

-匹配字符串的结尾

nav元素完整的类名由

.nav-

和正则表达式中匹配和捕获的内容串联而成

---

这实际上取决于URL的格式，但对于示例URL来说，这很好。这段代码真的让你保持干巴巴的心态——不要重复你自己。

我建议给你的搜索链接一个类，并做一些类似的事情：

$(document).ready(function(){
   var current = window.location.pathname;
   $('.search-link').each(function(){
      var link = '/' + $(this).attr('href');
      if (current == link){
        $(this).parent().addClass('active');
      }
   }); 
});

这将比较每个链接的href与当前路径名，如果它们匹配，则添加一个活动类。链接变量中的“/”是可选的，这取决于它是否已经在href中

---

$（this）.parent（）.addClass（'active'）将一个活动类添加到父'li'元素中，如果路径与bootstrap匹配，那么该元素可以很好地工作，但是您想要该类的位置和它的调用将取决于您的css。

为什么不从HTML中执行此操作？我使用的是Blogger，带有我制作的自定义菜单（响应菜单），而不是使用默认的链接列表。如果重定向不是从锚标记发生的呢？URL不一定在元素的href中，因此您不能依赖于在那里找到它。您是正确的。我以为他在使用带有

href

属性的锚。没关系！有时候我们真的不得不猜测！如果你对OP可能遗漏的某些细节做出假设，你应该在回答中说明。。

$(document).ready(function(){
   var current = window.location.pathname;
   $('.search-link').each(function(){
      var link = '/' + $(this).attr('href');
      if (current == link){
        $(this).parent().addClass('active');
      }
   }); 
});