2

我正在使用 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>

对纠正这个有任何帮助吗？

谢谢。

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

4

4 回答 4

4

在每个案例之后您都需要一个break，否则它将继续到下一个案例。

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() {

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

于 2013-05-01T21:50:46.707 回答
3

我建议给您的搜索链接一个类并执行以下操作：

$(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' 元素添加一个活动类，这与引导程序配合得很好，但是你想要类的位置以及它的名称将取决于你的CSS。

于 2014-08-14T00:14:03.183 回答
2

如果要添加current类的元素具有href相对于当前页面 URL 的值，则此方法可能对您来说更容易。

你可能会简化一点..

假设您在以下页面上： http: //domain.com/page.html

var current_location = window.location.href.split('/'); // ['http:', '', '', 'domain.com', 'page.html']
var page;

page = current_location[current_location.length - 1]; // the length of the current_location array is 5, subtract one to get the value of the 4th index - which is page.html

$('a[href*="' + page + '"]').addClass('current'); // find a link on the page that links to page.html (current page) and add a class of `current` to this URL

这是关于 jsbin 的示例：http: //jsbin.com/uzoyis/1

于 2013-05-01T21:58:34.283 回答
1

我会提出不同的建议。从您给出的示例中，很有可能从 URL 本身中提取元素类：

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

正则表达式匹配：

  1. \/- 一个斜杠字符（需要转义）。
  2. (\w+)- 多个单词字符。这也被“捕获”并返回。
  3. \.?- 文字点字符（也需要转义）。这是为了匹配文件扩展名的开头，例如.phpor .html。问号使它成为可选的。
  4. \/?- 文字斜线字符（也需要转义）。这是为了匹配 URL 的尾部斜杠 like /members/。问号使它成为可选的。
  5. $- 匹配字符串的结尾。

然后，导航元素的完整类名由连接.nav-和从正则表达式匹配和捕获的内容组成。

这实际上取决于您的 URL 的格式，但对于您的示例 URL，这将工作得很好。这段代码真的让你可以通过 DRY 的心态——不要重复自己。

于 2013-05-01T22:02:57.867 回答