Question

我的导航区域位于与我的内容不同的文件中，我使用php include将两者结合在一起。我希望导航区域链接根据活动的任何页面（即当前URL）更改颜色。所以我希望jQuery或Javascript读取当前的URL（实际上只是文件名，如home.html），然后根据它编写CSS。

所以喜欢，如果url = home.html，则为nav.home.background-＆gt;的change-css;蓝色

Answer 1

在你的情况下，你可以尝试这样的事情：

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

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

一个小警告：这只有在菜单中引用并在实际文档中使用的绝对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会返回absolute URI of the linked resource，而不会像您预期的那样返回HTML中指定的可能相对位置。 [标准DOM]
$(this).addClass(clzName)用于将CSS类添加到指定的元素。 [jQuery的]

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

Answer 2

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

Answer 3

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

}

这应该可以解决问题。

Answer 4

像这样的东西

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

Answer 5

在javascript中读取当前网址：

var url = window.location.href;

更改给定元素的css属性：

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

如何根据当前网址获取jQuery或Javascript来更改css？

5 个答案: