Here I use tab menu for select different tab i want to change the color of selected button, when I select button change it color
<div id="tabs">
<ul>
<li><a class="active" href="#" name="tab1">Tempu Services</a></li>
<li><a href="#" name="tab2">Buy and Sale</a></li>
<li><a href="#" name="tab2">Job Service</a></li>
</ul>
</div>
and my css id and my JavaScript is
<script>
$(window).load(function(){
$("#tabs ul li a").click(function () {
$("#tabs ul li a").not(this).removeClass("active").addClass('unactive')
$(this).toggleClass("unactive").toggleClass("active");
});
});//]]>
</script>
i also use this script for this
<script>
$(document).ready(function() {
$("#contenty").find("[id^='tab']").hide();
$("#tabs li:first").attr("id","currenty");
$("#contenty #tab1").fadeIn();
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "currenty"){
return;
}
else{
$("#contenty").find("[id^='tab']").hide();
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current");
$('#' + $(this).attr('name')).fadeIn();
}
});
});
</script>
and i use jquery 1.9.1
$(document).ready(function () {
$("#tabs ul li a").click(function () {
$('#tabs ul li a.active').removeClass('active').addClass('unactive');
$(this).addClass('active');
});
});
Try wrapping the code in ready event handler instead of load.
Try,
$("#tabs ul li a").click(function () {
$("#tabs ul li a").removeClass("active").addClass('unactive')
$(this).toggleClass("active unactive");
});
The most minimal approach would be,
$("#tabs ul li a").click(function () {
var active_link = $("#tabs ul li a").filter('.active').removeClass('active'); // filter elements only with class active and remove it.
$(this).toggleClass("active"); // toggle active class of this element
});
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.