如何解决jQuery:根据路径名动态更改<link>的<class>
|| 我们想根据window.location.pathname在链接上添加类 我们的html是: <nav>
<a href=\"index.php\">Home</a>
<a href=\"company.php\">Company</a>
<a href=\"products.php\">Products</a>
<a href=\"technical.php\">Technical</a>
<a href=\"services.php\">Services</a>
<a href=\"contactus.php\">Contact Us</a>
</nav>
文件的网址是www.nicadpower.com/index.php,所以我们做了
var page_name = window.location.pathname.substring(1);
在获取/知道路径名称为\'index.php \'之后,我们希望jquery做到这一点,将\'page_name \'与href进行比较,如果相等,则会添加class = \“ current \ ”
使我们的html代码像这样
<nav>
<a href=\"index.php\" class=\"current\">Home</a>
<a href=\"company.php\">Company</a>
<a href=\"products.php\">Products</a>
<a href=\"technical.php\">Technical</a>
<a href=\"services.php\">Services</a>
<a href=\"contactus.php\">Contact Us</a>
</nav>
解决方法
$(\"a[href=\'\" + page_name + \"\']\").addClass(\"current\");
这将选择具有必需的“ 5”属性值的“ 4”元素,并向其添加一个类。在这里查看示例小提琴。
, 您可能根本不需要JavaScript,请参阅最后的示例。
您正在寻找\“属性等于选择器\”,或者可能\“属性以\”选择器结束,等号选择器有效:
// The equals selector
$(\'nav a[href=\"\' + page_name + \'\"]\').addClass(\'current\');
// The ends-with selector
$(\'nav a[href$=\"\' + page_name + \'\"]\').addClass(\'current\');
“属性等于选择器”是CSS 2.1,受到广泛支持,因此您可能根本不需要JavaScript,只需使用样式表即可完成此操作。尾部选择器是CSS3,可能未得到很好的支持,如果您需要支持较旧的浏览器,则肯定不支持。
这是同时使用jQuery和CSS的示例页面。使用\“ attribute equals \”选择器的CSS版本可在IE7及更高版本,Firefox,Chrome,Opera和Safari上正常运行。 (CSS位在IE6上不起作用,这很奇怪。)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。