i need to create a navigation menu.when i select one of it i need to change css class in to active for corresponding li.for this i have used thes code as shown
<ul class="smallmenuContainer">
<li><a class="active" href="index.html#red">Home</a></li>
<li><a href="index.html#green">About us</a></li>
<li><a href="index.html#blue">Works</a></li>
<li><a href="index.html#yellow">Contact us</a></li>
</ul>
<div class="introContainer">
<a name="red">red</a>
</div>
<div class="aboutContainer">
<a name="green">green</a>
</div>
<div class="galleryContainer">
<a name="blue">blue</a>
</div>
<div class="contactContainer">
</div>
<a name="yellow">yellow</a>
could you please help me to change the corresponding css class...
use
$(function(){
$('.smallmenuContainer a').click(function(){
$('.smallmenuContainer a').removeClass('active');
$(this).addClass('active');
});
});
it will remove active class from all other a
tags and add class to current a
you can use removeClass and AddClass of jquery like this
$('.smallmenuContainer li>a').on('click',function(){
$('.smallmenuContainer li>a').removeClass('active');
$(this).addClass('active');
return false;
});
i dont quite understand what your mean but i think this can help you :
$('.smallmenuContainer').click(function(
//you should put the class you want to assigne here instead of cssclass
$('#smallmenuContainer li>a').removeClass('cssclass');
$(this).addClass('cssclass');
));
$( ".smallmenuContainer a" ).click(function() {
$( this ).toggleClass( "active" );
});
Don't forget to add the css for the 'active' class.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.