i using twitter bootstrap tabular interface. when click on tab, calling function hides , shows corresponding divs. html code:
<ul class="nav nav-tabs"> <li class="active" id="chart1"><a href="#">chart 1</a></li> <li id="chart2"><a href="#">chart 2</a></li> <li id="chart3"><a href="#">chart 3</a></li> <li id="chart4"><a href="#">chart 4</a></li> </ul> based on that, using following jquery show , hide content:
$(document).ready(function(){ $("#pie").hide(); $("#bar").hide(); $("#chart2").click(function(){ $("#statewise").hide(); $("#pie").show(); }); $("#chart3").click(function(){ $("#statewise").hide(); $("#pie").hide(); $("#bar").show(); }); }); how can on click, active class changes particular tab?
you can write this:
$("#chart2").click(function() { $(".active").removeclass("active"); $(this).addclass("active"); $("#statewise").hide(); $("#pie").show(); }); $("#chart3").click(function() { $(".active").removeclass("active"); $(this).addclass("active"); $("#statewise").hide(); $("#pie").hide(); $("#bar").show(); }); 