How to Change Active Class While Click to Another Link in Bootstrap Use Jquery

How to change active class while click to another link in bootstrap use jquery?

You are binding you click on the wrong element, you should bind it to the a.

You are prevent default event to occur on the li, but li have no default behavior, a does.

Try this:

$(document).ready(function () {
$('.nav li a').click(function(e) {

$('.nav li.active').removeClass('active');

var $parent = $(this).parent();
$parent.addClass('active');
e.preventDefault();
});
});

How to change the active class when clicking on other link?

i have done it by using the code behind:

<li style="font-family:Merriweather;"><a href="Default.aspx">Home</a></li>
<li id="test1" style="font-family:Merriweather;" runat="server"><a href="advertize.aspx">Advertise</a></li>
<li id="test2" class="dropdown" style="font-family:Merriweather;" runat="server">
<a href="exhibition.aspx" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Exhibitions <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li style="font-family:Merriweather;"><a href="dubaiexhibitions.aspx">Trade fairs in U.A.E</a></li>
<li style="font-family:Merriweather;"><a href="exhibition.aspx">Trade fairs worldwide</a></li>
<li style="font-family:Merriweather;"><a href="addexhibition.aspx">Add Your Event</a></li>
</ul>
</li>
<li id="test3" style="font-family:Merriweather;" runat="server"><a href="subscribe.aspx">Subscribe</a></li>
<li id="test4" style="font-family:Merriweather;" runat="server"><a href="member_benefits.aspx">Memberships</a></li>
<li id="test5" style="font-family:Merriweather;" runat="server"><a href="aboutus.aspx">About us</a></li>
<li id="test6" style="font-family:Merriweather;" runat="server"><a href="news.aspx">News</a></li>
<li id="test7" style="font-family:Merriweather;" runat="server"><a href="contactus.aspx">Contact us</a></li>
<li id="test8" style="font-family:Merriweather;" runat="server"><a href="media_partners.aspx">Partners</a></li>
<li id="test9" style="font-family:Merriweather;" runat="server"><a href="login.aspx" runat="server"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

here i added id to li and runat="server"

Code Behind:

Page Load
{
String activepage = Request.RawUrl;
if (activepage.Contains("advertize.aspx"))
{
test1.Attributes.Add("class", "active");
}
else if (activepage.Contains("subscribe.aspx"))
{
test3.Attributes.Add("class", "active");
}
else if (activepage.Contains("member_benefits.aspx"))
{
test4.Attributes.Add("class", "active");
}
else if (activepage.Contains("aboutus.aspx"))
{
test5.Attributes.Add("class", "active");
}
else if (activepage.Contains("news.aspx"))
{
test6.Attributes.Add("class", "active");
}
else if (activepage.Contains("contactus.aspx"))
{
test7.Attributes.Add("class", "active");
}
else if (activepage.Contains("media_partners.aspx"))
{
test8.Attributes.Add("class", "active");
}
else if (activepage.Contains("login.aspx"))
{
test9.Attributes.Add("class", "active");
}
}

jQuery onclick event for a tag to change 'active' class

You say you want to toggle active class of <a> tag right? but you target <li> and not <a>

$('.nav li').click(function () {
$('.nav li.active').removeClass('active');
$(this).addClass('active');
});

change to

$('.nav li').click(function () {
$('.nav li a.active').removeClass('active');
$(this).find("a").addClass('active');
});

UPDATED:

because you are loading header.html using jQuery it is possible that .ready() was executed before header.html actually loaded and and made the click event creation useless as is does not detect the element yet. To add the event after the element loads change:

$(function () {
$('#header').load('/pages/header.html');
});

$(document).ready(function() {
$('.nav a').click(function () {
$('.nav a.active').removeClass('active');
$(this).addClass('active');
});
});

TO

$(function () {
// modified
$('#header').load('/pages/header.html', function () {
$('.nav a').click(function () {
$('.nav a.active').removeClass('active');
$(this).addClass('active');
});
});
});

jQuery .load() complete callback reference

bootstrap 4 .active class not changing on click

I found a solution thanks to the answer of Jon here !!! :)
I changed the JS code to:

$(document).ready(function() {
$('li.active').removeClass('active');
$('a[href="' + location.pathname + '"]').closest('li').addClass('active');
});

Now it works fine :)

Changing menu options is NOT changing the active class even though I followed the solution in the link below

Your click handler on the <a> tags is adding/removing the .active class to the <a> tag but it should be doing it to the parent <li> tag:

$('#ftco-nav .navbar-nav li a').click((e) => {
$('#ftco-nav .active').removeClass('active');
$(e).parent().addClass('active');
// ...
}

Your scroll handler has a similar problem. It should be adding/removing the .active class from the <li class="nav-item"> tags, not the <a> tags:

if ($(this).position().top <= distance + 250) {
$('#ftco-nav .navbar-nav .nav-item.active').removeClass('active');
$('#ftco-nav .navbar-nav a').eq(i).parent().addClass('active');
}

How to change active class on li element in JQuery and redirect the user to the specified page when li elelment is clicked?

Why is the problem arising?

The problem arises that, when you use e.preventDefault() on click of
anchor tag, the default behaviour is to redirect the page and that's
why the page doesn't load but the active class gets added. But when
you don't use e.preventDefault(), the page redirects immediately
and the change you did happen but before it was redirected and not
for the new page(which could be redirected current page or some other page), that's why you can't see the class active added to
it.

.

How to fix the problem?

Well, there are a couple of ways to go about it. I'd say that from the
test.php or test2.php return a value, which you can validate against
the javascript with if-else conditions, if the value matches you make
that li class as active.

Here's the changes you need to make:

Add a span on each of your pages to which you have hyperlinked i.e test.php, test2.php, etc. having text the same as your hyperlink in the anchor tag so for test.php add a span as:

<span id="curpage" style="display:none;">test.php</span>

Then, add a script at the end of your body tag (you may be able to add this script in a seperate file and include in all of your php files using <?php include(".."); ?> :

$('a[href=\"' + $("#curpage").text() + '\"]').parent().addClass("active");

Here's a sample code, that you can try and implement. Make 2 files in
the same directory named as a.html having the code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<span id="curpage" style="display:none;">a.html</span>
<div class="menu">
<li><a href="b.html">1</a></li>
<li><a href="a.html">2</a></li>
</div>
<script>
$('a[href=\"' + $("#curpage").text() + '\"]').parent().css("color","red");
</script>
</body>
</html>

And b.html having the code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<span id="curpage" style="display:none;">b.html</span>
<div class="menu">
<li><a href="b.html">1</a></li>
<li><a href="a.html">2</a></li>
</div>
<script>
$('a[href=\"' + $("#curpage").text() + '\"]').parent().css("color","red");
</script>
</body>
</html>

And now when you change the pages by clicking the link, you can see
how the color of bullet changes.

How to change element's class to active?

Some people answering are a bit confused, thinking you are staying on the same page, and changing the class of your <a> tags. But I think your clicks on these navigate to new pages, and you want the appropriate <a> to have class active when the page loads.

This might help:

<script>
var path = location.pathname; // ex: '/profile';
var activeItem = document.querySelector("a[href='" + path + "']");
activeItem.class += ' active';
</script>

And of course with jquery it's even easier:

$(function() {
var path = location.pathname;
$("a[href='" + path + "']").addClass('active');
})

How I can make change of active class on nav li when the page is scrolling, relative to sections?

Here my solution, works perfectly.

jQuery(window).scroll(function(){
var $sections = $('section');
$sections.each(function(i,el){
var top = $(el).offset().top-100;
var bottom = top +$(el).height();
var scroll = $(window).scrollTop();
var id = $(el).attr('id');
if( scroll > top && scroll < bottom){
$('a.active-section-link').removeClass('active-section-link');
$('a[href="#'+id+'"]').addClass('active-section-link');

}
})
});

$("nav").on("click","a", function (event) {

event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top}, 800);
});

How to switch active class with jquery?

try this:

$('div#navbarSupportedContent li.nav-item').on('click', function(ev) {
ev.preventDefault();
$(this).parent().find('li.active').removeClass('active');
$(this).addClass('active');
});


Related Topics



Leave a reply



Submit