使用jQuery添加基于URL的类

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

这是我的代码：

 $(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') } }); });  

有任何帮助纠正这个？

谢谢。

编辑：对于那些问，我正在使用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类的元素具有相对于当前页面URL的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'); 

正则表达式匹配：

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

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

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