Question

我正在使用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以将适当的类应用于适当的菜单项。

Answer 1

每个案例后你需要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() {

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

Answer 2

我建议您为搜索链接提供一个类，并执行以下操作：

$(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与当前路径名进行比较，如果匹配则添加活动类。链接var中的'/'是可选的，具体取决于它是否已经在href中。

$（this）.parent（）。addClass（'active'）将一个活动类添加到父'li'元素中，如果路径匹配哪个适用于bootstrap，但你想要哪个类及其名称将取决于你的CSS。

Answer 3

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

你可以简化一下......

假设您在以下页面：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

Answer 4

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

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

正则表达式匹配：

\/ - 斜线字符（需要转义）。
(\w+) - 不止一个单词。这也被“捕获”并返回。
\.? - 一个文字点字符（也需要转义）。这是为了匹配.php或.html等文件扩展名的开头。问号使其成为可选项。
\/? - 一个字面斜杠字符（也需要进行转义）。这是为了匹配像/members/这样的URL的尾部斜杠。问号使其成为可选项。
$ - 匹配字符串的结尾。

导航元素完整的类名称由.nav-和从正则表达式中匹配和捕获的串联组成。

这实际上取决于您网址的格式，但对于您的示例网址，这可以正常工作。这段代码真的让你以DRY的心态 - 不要重复自己。

使用jQuery添加基于URL的类

4 个答案: