我希望能够确定用户当前所在的页面。一个简单的指示器,以向用户当前正在查看其上下文的导航链接添加独特样式的形式
这是我的脚本,所有选择器都工作正常,if 语句也可以,但是 addClass() 函数什么都不做。这是我的代码:
<script>
$(document).ready(function(){
var pathname = window.location.pathname;
$("#links ul li a").each( function() {
var href= $(this).attr("href");
if (pathname.indexOf(href) >= 0){
$(this).addClass("active");
}
} );
});
</script>
<nav id="links">
<ul>
<li><a href="index.php">Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
HTML:
可以使用了,这是我的最终代码,是否需要任何改进?
$(document).ready(function(){
var pathname = window.location.pathname;
var onDomain=true;
$("#links ul li a").each( function() {
var href= $(this).attr("href");
if (href != undefined && pathname.indexOf(href) >= 0){
$(this).addClass("active");
onDomain=false;
}
});
if (onDomain){
$("#links ul li:first-child a").addClass("active");
}
});
最佳答案
将href
赋给a
;
<nav id="links">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
然后尝试:
var pathname = window.location.pathname;
$("#links ul li a").each( function() {
var href= $(this).attr("href");
if (href.length && pathname.indexOf(href) >= 0){
$(this).addClass("active");
}
});
如果您无法更改 HTML,请尝试以下操作:
var pathname = window.location.pathname;
$("#links ul li a").each( function() {
var href= $(this).attr("href");
if (href != undefined && pathname.indexOf(href) >= 0){
$(this).addClass("active");
}
});
关于javascript - 简单的 jQuery addClass() 似乎不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10473584/