javascript - Change page background color based on active Bootstrap tab -
i want use jquery change page background color based on bootstrap tab active.
this script used bootstrap tabs:
$('#mytabs a').click(function (e) { e.preventdefault() $(this).tab('show') })
i need modify body's background-color
css property depending on tab active.
the fiddle below has bare-bones bootstrap 3 tabs gold background color. need able set seperate hex value each of 4 tabs.
you can use contains selector *
add click event , check particular id
set page background
color based on bootstrap tab click :
$('[id*="tab-"]').click(function (e) { e.preventdefault() $(this).tab('show') if(this.id=="tab-1"){ $('body').css('background', 'red'); } else if(this.id=="tab-2"){ $('body').css('background', 'green'); } else if(this.id=="tab-3"){ $('body').css('background', 'blue'); } else if(this.id=="tab-4"){ $('body').css('background', 'purple'); } });
Comments
Post a Comment