[英]How to add class active on specific li on user click with jQuery
我有一個包含某些項目的菜單,我希望當用戶clicks
任何li
,只有它的類變為active
。 我有一個菜單項,如下所示:
<ul class="nav">
<li class="dropdown active">
<asp:HyperLink ID="hlHome" runat="server" href="Default.aspx">Home</asp:HyperLink>
</li>
<li class="dropdown">
<asp:HyperLink runat="Server" cssClass="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">
Register
<i class="icon-angle-down"></i>
</asp:HyperLink>
<ul class="dropdown-menu">
<li><asp:HyperLink runat="server" ID="hlCreateAccount" href="register.aspx">Create Account</asp:HyperLink></li>
<li><asp:HyperLink runat="Server" href="forgot.aspx" ID="hlForgot">Forgot Credentials ?</asp:HyperLink></li>
<li><asp:HyperLink runat="server" href="blocked.aspx" ID="hlBlockedAccount">Blocked Account</asp:HyperLink></li>
<li><asp:HyperLink ID="hlUnblockAccount" href="unblock.aspx" runat="server">Unblock Account</asp:HyperLink></li>
</ul>
</li>
<li><asp:HyperLink ID="hlBug" runat="server" href="bug.aspx">Report A Bug</asp:HyperLink></li>
<li><asp:HyperLink ID="hlContact" runat="server" href="contact.aspx">Contact Us</asp:HyperLink></li>
</ul>
我已經用 jQuery 嘗試了以下代碼:
<script type="text/javascript">
function pageLoad() {
var loc = window.location.href.split('/');
var page = loc[loc.length - 1];
$('ul.nav a').each(function (i) {
var href = $(this).attr('href');
if (href.indexOf(page) !== -1) {
$('ul.nav li.active').removeClass('active');
$(this).parent().addClass('active');
}
});
}
</script>
它不適用於下拉菜單,而與所有其他沒有下拉項目的菜單完美配合。 如何更改它也適用於具有項目下拉列表的菜單項的代碼? 我也在我的頁面上使用更新面板。
您在標簽中同時指定了 jQuery 和 Javascript,所以這里有兩種方法。
jQuery
var selector = '.nav li';
$(selector).on('click', function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
小提琴: http : //jsfiddle.net/bvf9u/
純Javascript:
var selector, elems, makeActive;
selector = '.nav li';
elems = document.querySelectorAll(selector);
makeActive = function () {
for (var i = 0; i < elems.length; i++)
elems[i].classList.remove('active');
this.classList.add('active');
};
for (var i = 0; i < elems.length; i++)
elems[i].addEventListener('mousedown', makeActive);
小提琴: http : //jsfiddle.net/rn3nc/1
帶有事件委托的jQuery:
請注意,在方法 1 中,處理程序直接綁定到該元素。 如果您希望 DOM 更新並注入新的li
,最好使用事件委托並委托給下一個將保持靜態的元素,在本例中為.nav
:
$('.nav').on('click', 'li', function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
});
小提琴: http : //jsfiddle.net/bvf9u/1/
細微的區別是處理程序現在綁定到.nav
,因此當您單擊li
,事件.nav
DOM 向上冒泡到.nav
,如果單擊的元素與您的selector
參數匹配,則調用處理程序。 這意味着新元素不需要綁定到它們的新處理程序,因為它已經綁定到一個祖先。
這真的很有趣。 在此處閱讀更多相關信息: http : //api.jquery.com/on/
$(document).ready(function () {
$('.dates li a').click(function (e) {
$('.dates li a').removeClass('active');
var $parent = $(this);
if (!$parent.hasClass('active')) {
$parent.addClass('active');
}
e.preventDefault();
});
});
//編寫一個javascript方法來綁定每個“li”項的點擊事件
function BindClickEvent()
{
var selector = '.nav li';
//Removes click event of each li
$(selector ).unbind('click');
//Add click event
$(selector ).bind('click', function()
{
$(selector).removeClass('active');
$(this).addClass('active');
});
}
//第一次加載頁面時首先調用這個方法
$( document ).ready(function() {
BindClickEvent();
});
//從服務端調用BindClickEvent方法
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(Page,GetType(), Guid.NewGuid().ToString(),"BindClickEvent();",true);
}
有點離題,但在開發 Angular2 應用程序時到達這里我想分享一下,Angular2 會自動將類“router-link-active”添加到活動路由器鏈接,例如:
<li><a [routerLink]="['Dashboard']">Dashboard</a></li>
因此,您可以使用 CSS 輕松設置此類鏈接的樣式:
.router-link-active {
color: red;
}
// Remove active for all items.
$('.sidebar-menu li').removeClass('active');
// highlight submenu item
$('li a[href="' + this.location.pathname + '"]').parent().addClass('active');
// Highlight parent menu item.
$('ul a[href="' + this.location.pathname + '"]').parents('li').addClass('active')
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.