[英]Fail Add Active Navigation Class Based on URL
我的博客上有一個基本的菜單結構,使用以下代碼。 我嘗試過每一個片段,也在這里做了一些類似的話題,但是沒有用。 我要做的就是根據URL向我的導航菜單添加活動類。 因此,網站上的訪問者或用戶知道他所在的頁面或網站的一部分。 因此,有人可以簡單解釋一下在何處以及如何在javascript中添加代碼嗎?
菜單結構
<div id="navigation">
<div class="backer" style="position: relative;">
<div class="header-inner-wrap">
<div class="header section" id="header">
<div class="widget Header" data-version="1" id="Header1">
<h1><div id="header-inner">
<a href=""></a></div></h1>
</div></div>
</div>
<nav class="main-nav" itemscope="itemscope" role="navigation">
<ul class="menu">
<li><a href="">About</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">Tips</a></li>
</ul>
</nav>
</div>
</div>
使用Javascript:
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("menu li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});
CSS:
.menu li .active{border-bottom:3px blue solid;}
提前致謝
您可能要檢查菜單類的選擇器是否匹配:
$("menu li a").each(function(){
應該是
$(".menu li a").each(function(){
編輯:根據新信息,以下更改應可解決您的問題。
從
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
至
var pgurl = window.location.href;
而且or
你的病情的一部分是不必要的。 所以從這里改變
$("menu li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
對此
$(".menu li a").each(function(){
if($(this).attr("href") == pgurl){
$(this).addClass("active");
}
});
除了解決您眼前的問題之外,您還應該努力學習正確的javascript,而不是復制和使用摘要,以便可以輕松分析代碼並找出問題的原因。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.