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 theactive class gets added
. But when
youdon't use e.preventDefault()
, thepage redirects
immediately
and the change youdid 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 youcan'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.phpreturn a value
, which you canvalidate
against
the javascript withif-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
Why Does Settimeout() "Break" for Large Millisecond Delay Values
How to Clone HTML Element Objects in JavaScript
How to Inherit from a Class in JavaScript
JavaScript Validation for Empty Input Field
Failed to Load C++ Bson Extension
Check If Event Is Triggered by a Human
Origin <Origin> Is Not Allowed by Access-Control-Allow-Origin
What's the Fastest Way to Convert String to Number in JavaScript
How to Avoid Long Nesting of Asynchronous Functions in Node.Js
How to Check If the Array of Objects Have Duplicate Property Values
Highlight Selected Node, Its Links, and Its Children in a D3 Force Directed Graph
How to Be Notified Once a Web Font Has Loaded
How to Detect If Flash Is Installed and If Not, Display a Hidden Div That Informs the User
How to Set Multipart in Axios with React
React Hooks - Right Way to Clear Timeouts and Intervals
How to Disable an Input Type=Text
How to Filter Input Type="File" Dialog by Specific File Type