logo标签列表

如何使用jQuery或JavaScript根据当前URL更改CSS？

javascriptjquerycss
5
我有一个导航区域，它与我的内容分开存储在不同的文件中，我使用php include将两者组合在一起。我希望导航区域链接根据当前页面（即当前URL）的活动状态更改颜色。因此，我想要使用jQuery或Javascript读取当前URL（实际上只是文件名，如home.html），然后基于此编写CSS。
例如：如果url = home.html，则更改导航.home.background的CSS为蓝色。
1
只是一个想法，但使用JavaScript而不是PHP有什么原因吗？ PHP将提供一种浏览器一致的解决方案（例如，不受关闭JavaScript等用户影响）。 - n00dle
5个回答
5
我认为更好的解决方案是在html标签上设置一个类，而不是每个页面都交换一个css文件。
$("html").addClass(window.location.path.split(".")[0]);

然后基于该类别可以有任何自定义 CSS 样式：

html.home > .nav { background-color: blue; }
html.about > .nav { background-color: green; }
html.contact > .nav { background-color: red; }

只有每个页面都有可分割的扩展名才能实现此功能。

由于您正在使用PHP，因此完全可以不使用jQuery来实现此操作：

<html class="<?php $_SERVER['PHP_SELF'] ?>">

或者类似的东西，我对PHP知之甚少，但我确信它应该是类似或基于这个构建的。
5
在你的情况下，你可以尝试像这样做：
$("A").each(function () {
    if (this.href == document.URL) {
        $(this).addClass('active');
    }
});

这将检查每个链接的href属性是否与当前文档的URL匹配，如果匹配，则将'class active'添加到元素的CSS类中。

一个小注意点：只有当菜单中引用的绝对URL与实际文档中使用的完全匹配时，此方法才有效。例如，当前URL是http://example.org/dir/，则<a href="index.html">不会被突出显示，因为它解析为http://example.org/dir/index.html。但是<a href="/dir/">会匹配。
（确保在整个网站的每个页面上使用相同的URL是良好的实践，例如用于搜索引擎优化和缓存代理）

使用的不同部分如下：

  • $("A") 选择所有的A元素（超链接）。你可能想要更加具体，选择菜单中的所有A元素，例如 $("#menu A")。[jQuery]
  • .each(func) 在所选元素中的每一个上执行指定的函数。在该函数内部，this将引用所选元素。[jQuery]
  • this.href 返回链接资源的绝对URI，而不是HTML中指定的可能相对位置。[标准DOM]
  • $(this).addClass(clzName) 用于向指定元素添加CSS类。[jQuery]

为了确保$("A")找到所有元素，在文档完全加载后执行它（在$(document).ready() jQuery事件处理程序中，或使用BODY标记的onload属性）。

这太棒了，非常优雅。但我还无法让它正常工作（http://i5.nyu.edu/~jpr226/）-- $("A").each是什么意思？需要jQuery吗？ - Jonathan
是的，它需要jQuery。我会更新我的答案来进一步解释。 - beetstra
$(this).addClass('active') 似乎无效；我尝试在该行下添加“alert(this)”以查看（this）包含的内容，结果弹出一个显示当前URL的警告框，这让我认为它并没有很好地选择要分类的元素。 - Jonathan
但奇怪的是，$(this).hide('slow')可以工作，所以可能是我的CSS或其他问题。我会继续尝试。谢谢你，这太棒了，改变了我的生活。 - Jonathan
在这种情况下，我们可以使用window.location.href获取当前URL吗？ - Gaurav Ojha
2
var url_arr = document.URL.split('/'),
    page    = url_arr[url_arr.length - 1];

switch (page) {
    case 'home.html':
        $('your-element').addClass('your-class');
        break;

    /* other cases here */

}

那应该就行了。

1

类似这样的东西

var url = $(location).attr('href');
    //get the url

if(url.indexOf('home.html') != -1){
    //indeOf returns -1 if item not found in string
    //so if it is not -1 (that is, found)
    //then apply the styles 
    $('#nav').css('background','blue');
}

你可能需要使用 switch 或 case 语句来处理所有的 URL/部分。

类似于

var url = $(location).attr('href');
var fileName = url.slice(url.lastIndexOf('/') + 1);

switch (fileName){
    case 'home.html':
      $('#nav').css('background','blue');
      break;
    case 'about.html':
      $('#nav').css('background','red');
      break;
}
1

在JavaScript中读取当前URL：

var url = window.location.href;

更改给定元素上的 css 属性：
$('some_selector').css({ backgroundColor, 'blue' });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接