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.

jsfiddle

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');     } }); 

here working jsfiddle play with