如何让jQuery或Javascript根据当前url更改css？_Javascript_Jquery_Css

如何让jQuery或Javascript根据当前url更改css？

javascript jquery css

如何让jQuery或Javascript根据当前url更改css？,javascript,jquery,css,Javascript,Jquery,Css,我的内容中有一个单独文件中的导航区域，我使用一个php include将这两个区域合并在一起。我希望导航区链接根据任何活动页面（即当前URL）更改颜色。因此，我希望jQuery或Javascript读取当前URL（实际上只是文件名，如home.html），然后在此基础上编写CSS 那么像，如果url=home.html，则更改nav.home.background->blue的css var url = $(location).attr('href'); //get the url

我的内容中有一个单独文件中的导航区域，我使用一个php include将这两个区域合并在一起。我希望导航区链接根据任何活动页面（即当前URL）更改颜色。因此，我希望jQuery或Javascript读取当前URL（实际上只是文件名，如home.html），然后在此基础上编写CSS

那么像，如果url=home.html，则更改nav.home.background->blue的css

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;
}

要读取javascript中的当前url，请执行以下操作：

var url = window.location.href;

要更改给定元素的属性，请执行以下操作：

$('some_selector').css({ backgroundColor, 'blue' });

我认为更好的解决方案是在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'] ?>">

在您的情况下，您可以尝试以下方法：
$("A").each(function () {
    if (this.href == document.URL) {
        $(this).addClass('active');
    }
});

这将检查每个链接的href属性是否与当前文档URL匹配，以及是否将类“active”添加到元素CSS类中
一个小警告：只有在菜单中引用并在实际文档中使用的绝对URL完全匹配的情况下，这才有效。
假设当前的URL是http://example.org/dir/
，然后，而不是如您所料，在HTML中指定的可能相对位置。[标准DOM]
$（this）.addClass（clzName）
用于向指定元素添加CSS类。[jQuery]

要确保$（“A”）
找到所有元素，请在文档完全加载后执行它（在$（document）.ready（）
jQuery事件处理程序中，或使用BODY
标记的onload
属性）。这只是一个想法，但有理由在PHP上使用javascript这样做吗？PHP将提供一个浏览器一致性的解决方案（例如，不受关闭javscript的用户的影响等），这是惊人的，而且非常优雅。不过，我不能完全让它工作（Dos$（“A”）。每个do？都需要jQuery吗？是的，它需要jQuery。我将更新我的答案以进一步解释。$（this）。addClass（'active'）似乎不起作用；我试图通过添加“alert（this）”来查看（this）包含的内容在这行下面，我得到一个提示，上面写着当前的url，这让我相信它在选择要分类的元素方面做得并不好，但奇怪的是，$（this.hide（'slow'））工作正常，所以可能是我的CSS或其他方面的问题。我会继续尝试。谢谢你，这真是太棒了，改变了生活。在这种情况下，我们可以使用window.location.href获取当前url吗？
$("A").each(function () {
    if (this.href == document.URL) {
        $(this).addClass('active');
    }
});