我試圖用jquery來改變選單的活動類別，當我點擊'a'標簽時。當我點擊一個標簽時，它會重定向到a標簽的'href'屬性，但不會改變活動選單。當我使用'e.preventDefult'時，它不會轉到'href'，但活動選單會按我的要求改變。 我應該怎么做？ 這是我使用的jquery：
<script>
$(document).ready(function(e) {
$('.navigation-menu-body ul li a').click(function (e) {
$('.navigation-menu-body ul li a.active').removeClass（'active'）。
$(this).addClass('active') 。
$('.navigation-menu-body ul.navigation-active').removeClass('navigation-active')。
$(this).parent().parent() 。 addClass（'navigation-active'）。
$('.navigation-icon-menu ul li.navigation-active').removeClass（'active'）。
$('.navigation-icon-menu ul li').addClass('active') 。
window.location。 href = $(this).attr('href') 。
console.log("href:", $（this）。 attr('href') )。
e.preventDefault（）。
});
})
這是html：
<div class=" navigation">
<div class="navigation-icon-menu">/span>
<ul>/span>
< li data-toggle="tooltip" title="???????">
< a href="#navigationDashboards" title="?????????">
<i class="icon ti-pie-chart"/span>> </i>>
</a>/span>
</li>/span>
< li data-toggle="tooltip" title="??????? ?????">
< a href="#festivals" title="??????? ??? ??">
<i class="icon ti-package"/span>> </i>>
</a>/span>
</li>/span>
< li data-toggle="tooltip" title="????????????">
< a href="#serialNumbers" title="????? ???????">
<i class="icon ti-layer"> </i>>
</a>/span>
</li>/span>
< li data-toggle="tooltip" title="????? ???????">
< a href="#invoices" title="????? ????">
<i class="icon ti-agenda"/span>> </i>>
</a>/span>
</li>/span>
</ul>/span>
</div>/span>
<div class="navigation-menu-body">/span>
< ul id="navigationDashboards" class="navigation-active">
<li class="navigation-divider"/span>> ???????</li>。
<li>/span>
< a class="active" href="/dashboard/index" /span>> ???? ???????????</a>。
</li>/span>
</ul>/span>
<ul id=" festivals">
<li class=" navigation-divider"> ??????? ??</li>。
<li>/span>
<a href="chat. html">??????? ?????</a>
</li>/span>
</ul>/span>
<ul id="serialNumbers">/span>
<li class=" navigation-divider"> ????????????</li>。
<li>< a href="/userSerialNumber/AssignSerialNumber"/span>> ??? ?? ???? </a></li>>
<li>< a href="/userSerialNumber/UserScores"/span>> ?????????? ?? ?? ??????? </a></li>>
</ul>/span>
<ul id=" invoices">
<li class=" navigation-divider"> ????? ???????</li>。
<li><a href="file. html">???????????? </a></li>
</ul>/span>
</div>/span>
</div>/span>
uj5u.com熱心網友回復：
當點擊一個錨點標簽時，你會進入一個不同的頁面，所以為了讓你添加一個活動的類，請檢查URL與document.ready上的hrefs，如果引數匹配，則添加該類。
$document.ready(function(/span>) {
var url = window.location.pathname,
urlRegExp = new RegExp(url. replace(//$/,''/span>))。
$('.navigation-menu-body ul li a').each(function(){
if(urlRegExp.test(this.href) ）{
$(this).addClass('active') 。
}
});
});
uj5u.com熱心網友回復：
我不太了解jQuery，但你可以在vanilla js中很容易地做到這一點。 首先你為你得到的每個li指定一個id。然后你需要檢查url，這樣你就可以為你當前所在的url的li標簽添加活動類。
<ul onload="checkUrl()"/span>>
< li id="tab1"/span> data- toggle="tooltip" title="???????">
< a href="#navigationDashboards" title="?????????">
<i class="icon ti-pie-chart"/span>> </i>>
</a>/span>
</li>/span>
< li id="tab2"/span> data- toggle="tooltip" title="??????? ??? ??" >
< a href="#festivals" title="??????? ??? ??">
<i class="icon ti-package"/span>> </i>>
</a>/span>
</li>/span>
< li id="tab3"/span> data- toggle="tooltip" title="????????????">
< a href="#serialNumbers" title="????? ???????">
<i class="icon ti-layer"> </i>>
</a>/span>
</li>/span>
< li id="tab4"/span> data- toggle="tooltip" title="????? ????">
< a id="tab4" href="#invoices" title="????? ????">
<i class="icon ti-agenda"/span>> </i>>
</a>/span>
</li>/span>
</ul>
然后是js：
function checkUrl() {
if (document.location.href =="https://example.com/url-of-first-tab") {
document.getElementById("tab1") 。 classList.add("active") 。
}
if (document.location.href == "https://example.com/url-of-second-tab") {
document.getElementById("tab2") 。 classList.add("active") 。
}
if (document.location.href =="https://example.com/url-of-third-tab") {
document.getElementById("tab3"/span>)。 classList.add("active") 。
}
if (document.location.href =="https://example.com/url-of-forth-tab") {
document.getElementById("tab4"/span>)。 classList.add("active") 。
}
另外，請記住，你的a標簽在html中都不應該有active類！
。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/321663.html
標籤：