如何让jQuery或Javascript根据当前url更改css
How can I get jQuery or Javascript to change css based on the current url?
我在一个独立于内容的文件中有一个导航区域,我使用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;
}
- iFrame url更改时执行函数
- $http GET URL更改并查找错误的资源
- 用于自动将一种类型的URL更改为另一种类型
- 通过 JavaScript 捕获 URL 更改事件
- 如何在地址栏中的URL更改Firefox JPM时获得通知
- 在Twitch.tv上收听URL更改
- SEO友好的页面页面没有URL更改
- 对于多个视图,当URL更改时,我的子模板不会在Angular UI中加载
- 根据URL更改更改DOM元素类名
- 将 URL 更改为页面上单击的元素,而无需重新加载页面
- 当浏览器选项卡中的 url 更改时自动注销
- 提交请求时出现意外的 URL 更改
- 等待 Casper.js 中的 URL 更改
- 如何将URL更改为花式框内部URL
- 根据用于访问您的域的 URL 更改页面内容
- URL 更改事件 - JavaScript
- 在 url 更改时对 iframe 进行动画处理
- 如何在 Angular 中的 url 更改时仅重新加载一个控制器
- 选中并提交单选按钮上的 URL 更改
- 如何使用jquery(或javascript)检测没有哈希的url的url更改