[英]How to select “a” tag has specific file type in href using jQuery?
[英]How to add specific class to anchor tag has href equal to URL using jquery?
我想要一個 jQuery 動態菜單,可以導航到<a></a>
標簽和包含在頁面 URL 中的標簽。
$('ul.nav.navbar-nav.side-nav.nicescroll-bar li').find('a').each(function() { var text = $(this).attr("href"); if (window.location.href.includes(text)) { $('ul.nav.navbar-nav.side-nav.nicescroll-bar li a').addClass('active') } else {} });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav navbar-nav side-nav nicescroll-bar" style="overflow: hidden; width: auto; height: 100%;"> <li><a href="home">home</a></li> <li><a href="dashboard">dashboard</a></li> <li><a href="base">base</a></li> <li><a href="test">test</a></li> </ul>
在這段代碼中,所有菜單都有一個顏色變化,應該根據頁面地址改變菜單的顏色。
只需刪除 else 中的類:
if (window.location.href.includes(text)) {
$(this).addClass('active')
} else {
$(this).removeClass('active')
}
改變
if (window.location.href.includes(text)) {
$('ul.nav.navbar-nav.side-nav.nicescroll-bar li a').addClass('active')
}
進入
if (window.location.href.includes(text)) {
$(this).addClass('active')
}
當您使用它來添加類時,它會起作用。 我將一個 href 更改為 stack,因為代碼片段的 href 類似於 stacksnippet。 對於該元素,它的顏色為紅色。
$('ul.nav.navbar-nav.side-nav.nicescroll-bar li').find('a').each(function() { var text = $(this).attr("href"); if (window.location.href.includes(text)) { $(this).addClass('active') } });
.active { color: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav navbar-nav side-nav nicescroll-bar" style="overflow: hidden; width: auto; height: 100%;"> <li><a href="home">home</a></li> <li><a href="dashboard">dashboard</a></li> <li><a href="stack">base</a></li> <li><a href="test">test</a></li> </ul>
您可以簡化選擇器和代碼並使用.filter()
而不是.each()
$('ul.navbar-nav li a').filter(function(){
return window.location.href.includes($(this).attr('href'));
}).addClass('active');
window.location.href = "#home"; $('ul.navbar-nav li a').filter(function(){ return window.location.href.includes($(this).attr('href')); }).addClass('active');
.active {color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav navbar-nav side-nav nicescroll-bar" style="overflow: hidden; width: auto; height: 100%;"> <li><a href="home">home</a></li> <li><a href="dashboard">dashboard</a></li> <li><a href="base">base</a></li> <li><a href="test">test</a></li> </ul>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.