我如何获得jQuery或Javascript更改基于当前网址的CSS？ [英] How can I get jQuery or Javascript to change css based on the current url?

问题描述

我有一个导航区域在一个单独的文件，从我的内容，我拉在一起使用php包括。我想要导航区域链接根据活动的任何页面（即当前URL）更改颜色。所以我想要jQuery或Javascript来读取当前的URL（实际上只是文件名，如home.html），然后基于它编写CSS。

就像
if url = home.html，change-css for nav.home.background-> blue

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

  $（A）。each（function（）{
 if（this.href == document.URL）{
 $（this）.addClass（'active'）; 
 } 
}）; 
 

如果href属性与当前文档URL匹配，则检查每个链接，如果它添加类'active'到元素CSS类。
这将不工作在IE6，但那些仍然使用IE6的人应该被枪杀。

一个小警告：这只会工作，如果绝对URL引用到菜单中，并在实际文档中使用完全匹配。
所以让我们假设当前的URL是 http://example.org/dir/ ，然后是< a href =index。 html> 将不会突出显示，因为它解析为 http://example.org/dir/index.html 。 < a href =/ dir /> 将匹配。

（确保整个网站的每个网页都使用相同的网址好的做法，例如搜索引擎优化和缓存代理）

使用的不同部分为：

• $（A）选择所有 A 元素（anchors）。您可能希望通过选择菜单中的所有 A 元素，使其更具体一些。 $（＃menu A）。 [jQuery]


• .each（func）对每个选定的元素执行指定的函数。在该函数中，此将引用所选元素。 [jQuery]


• this.href 返回链接资源的绝对URI ，而不是您可能期望的HTML中指定的可能的相对位置。 [standard DOM]


• $（this）.addClass（clzName）用于向指定元素添加CSS类。 [jQuery]

为了确保 $（A）元素，在文档完全加载（在 $（document）.ready（） jQuery事件处理程序或使用 onload BODY 标记的属性）。

I have a navigation area in a separate file from my content, and I pull together the two using a php include. I want the navigation area links to change color based on whatever page is active, i.e. the current URL. So I want jQuery or Javascript to read the current URL (actually just the filename, like home.html), then write CSS based on that.

So like, if url=home.html, change-css for nav.home.background-> blue

解决方案

In your situation, you could try something like this:

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

That checks for every link if the href attribute matches the current documents URL, and if it does add class 'active' to the elements CSS classes. This will not work in IE6, but those who still use IE6 should be shot anyway.

A small caveat: this will only work if the absolute URL referred to in the menu and used in the actual document match exactly. So let's say the current URL is http://example.org/dir/, then <a href="index.html"> will not be highlighted, since it resolves to http://example.org/dir/index.html. <a href="/dir/"> will match.
(Making sure the same URL is used for each page throughout the site is good practice anyway, e.g. for search engine optimization and caching proxies)

The different parts used are:

• $("A") selects all A elements (anchors). You'll probably want to make it a bit more specific by selecting all A elements within your menu, e.g. $("#menu A"). [jQuery]
• .each(func) executes the specified function on each of selected elements. Within that function this will refer to the selected element. [jQuery]
• this.href returns the absolute URI of the linked resource, not, as you might expect, the possibly relative location specified in the HTML. [standard DOM]
• $(this).addClass(clzName) is used to add a CSS-class to the specified element. [jQuery]

To make sure $("A") finds all elements, execute it after the document is fully loaded (in the $(document).ready() jQuery event-handler, or using the onload attribute of the BODY tag).

这篇关于我如何获得jQuery或Javascript更改基于当前网址的CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！