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

How can I get jQuery or Javascript to change css based on the current url?

本文关键字：url 更改 css jQuery Javascript      更新时间：2023-09-26

我在一个独立于内容的文件中有一个导航区域，我使用php include将两者结合在一起。我希望导航区域链接根据活动页面(即当前URL(更改颜色。所以我想让jQuery或Javascript读取当前的URL(实际上只是文件名，比如home.html(，然后在此基础上编写CSS。

就像，如果url=home.html，则将css更改为nav.home.background->blue

在您的情况下，您可以尝试以下操作：

$("A").each(function () {
    if (this.href == document.URL) {
        $(this).addClass('active');
    }
});

如果href属性与当前文档URL匹配，并且它确实将类"active"添加到元素CSS类中，则会检查每个链接。

一个小警告：只有当菜单中引用的和实际文档中使用的绝对URL完全匹配时，这才有效。假设当前URL是http://example.org/dir/，那么<a href="index.html">将不会高亮显示，因为它解析为http://example.org/dir/index.html。<a href="/dir/">将匹配
(确保整个网站的每个页面都使用相同的URL是一种很好的做法，例如用于搜索引擎优化和缓存代理(

使用的不同部件有：

  • CCD_ 5选择所有CCD_ 6元素(锚(。您可能希望通过选择菜单中的所有A元素(例如$("#menu A")(来使其更加具体。[jQuery]
  • CCD_ 9对所选择的每个元素执行指定的功能。在该函数中，this将指代所选择的元素。[jQuery]
  • this.href返回链接资源的绝对URI，而不是HTML中指定的可能的相对位置。[标准DOM]
  • $(this).addClass(clzName)用于向指定的元素添加CSS类。[jQuery]

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

我认为更好的解决方案是在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知之甚少，但我相信它会是类似的东西或建立在这个之上

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 */
}

这就行了。

在javascript:中读取当前url

var url = window.location.href;

要更改给定元素的css属性：

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

类似的东西

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;
}
相关文章：