[英]jquery, add active class to links
嗨,我正在關閉畫布菜單上工作,我想添加一個類來突出顯示活動菜單項,但是我當前正在使用的jquery代碼似乎並未將該類添加到活動鏈接中。 我嘗試了所有在網絡上遇到的潛在解決方案,但似乎沒有任何效果。 有什么建議,想法,資源嗎?
<nav class="site-menu">
<div class="menu-list">
<ul>
<li><a href="portfolio.php">portfolio</a></li>
<li><a href="projects.php">projects</a></li>
<li><a href="process.php">process</a></li>
<li><a href="blog.php">blog</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</div>
</nav>
的CSS
.site-menu ul {
list-style: none;
padding: 20px;
margin: 0;
}
.site-menu ul li a {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
color: #7f7f7f;
background: transparent;
text-decoration:none;
}
.menu-list{
position: absolute;
top: 80px;
margin-left: 10px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
text-align: left;
}
.active {
color:#fff;
}
腳本
var selector = ".site-menu li";
$(selector).click(function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
您需要使CSS選擇器更具體:
.site-menu ul li.active a {
color: #fff;
}
否則規則.site-menu ul li a
具有更高的優先級。
閱讀以下主題: CSS特殊性:您應該知道的事情 。
嘗試這個:
var selector = ".site-menu li";
selector.click(function(){
selector.removeClass('active');
$(this).addClass('active');
});
您必須將選擇器更改為以下選擇器:
var selector = ".site-menu ul li a";
當您加載新頁面時,javascript更改將丟失。 但是您可以像這樣檢查頁面加載時active
狀態的頁面:
JS
(function($){
$('.site-menu li a').each(function(){
if( $(this).attr('href') == window.location.pathname ) $(this).addClass('active');
})
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.