I have a menu with certain items and I want when a user clicks on any li than only its class becomes an active class. I have a menu items like following:
<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>
And I have tried the following code with 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>
Its not working with the drop down menus while working perfect with all other menus not having drop down items. How can I change the code that it works too with menu item having drop down list of items. I am also using update panel in my page.
This question is related to
javascript
jquery
html
asp.net
css
You specified both jQuery and Javascript in the tags so here's both approaches.
jQuery
var selector = '.nav li';
$(selector).on('click', function(){
$(selector).removeClass('active');
$(this).addClass('active');
});
Fiddle: http://jsfiddle.net/bvf9u/
Pure 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);
Fiddle: http://jsfiddle.net/rn3nc/1
jQuery with event delegation:
Please note that in approach 1, the handler is directly bound to that element. If you're expecting the DOM to update and new lis to be injected, it's better to use event delegation and delegate to the next element that will remain static, in this case the .nav:
$('.nav').on('click', 'li', function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
});
Fiddle: http://jsfiddle.net/bvf9u/1/
The subtle difference is that the handler is bound to the .nav now, so when you click the li the event bubbles up the DOM to the .nav which invokes the handler if the element clicked matches your selector argument. This means new elements won't need a new handler bound to them, because it's already bound to an ancestor.
It's really quite interesting. Read more about it here: http://api.jquery.com/on/
// 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')
$(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();
});
});
//Write a javascript method to bind click event of each "li" item
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');
});
}
//first call this method when first time when page load
$( document ).ready(function() {
BindClickEvent();
});
//Call BindClickEvent method from server side
protected void Page_Load(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(Page,GetType(), Guid.NewGuid().ToString(),"BindClickEvent();",true);
}
Slightly off topic but having arrived here while developing an Angular2 app I would like to share that Angular2 automatically adds the class "router-link-active" to active router links such as this one:
<li><a [routerLink]="['Dashboard']">Dashboard</a></li>
You can therefore easily style such links using CSS:
.router-link-active {
color: red;
}
Source: Stackoverflow.com