由于页面重新加载而导致活动类丢失

Question

I have two tabs on my page

1. Tabular
2. Graphical

My page showing two forms of same data as mentioned above, by default it is showing graphical form.

My code for tabs are:

<form method="get">
     <ul class="nav nav-tabs" role="tablist">
          <li class="active" ><a href="todayfiletype1.php?graph=1" >Graphical View</a></li>
         <li ><a href="todayfiletype1.php?graph=2">Tabular View</a></li>
    </ul>
</form> 

When I click on one of tab I want to execute below code as per the query string I passed with hyperlink, however page gets reloaded active class does not change with change in tabs

if(isset($_GET['graph']))
{
$opt=$_GET['graph'];
}
else
$opt=1;

if($opt==1)
{
//code related to graphical tab
}
else
{
//code related to tabular tab
}

Please suggest me how can I get active class as per click..Currently it is changing but lost due to page reload.

Jquery code used to switch active class

$(document).ready(function() {
     $("li").click(function(event) {
          //event.preventDefault();
          if ($("li").hasClass('active')) {
               $("li").removeClass('active');
          }
          $(this).addClass('active');
     });
});

Answer 1

You need to add the class to the correct element, based on the value of the $opt variable:

<form method="get">
     <ul class="nav nav-tabs" role="tablist">
          <li<?php echo ($opt==1)?' class="active"':'';?>><a href="todayfiletype1.php?graph=1" >Graphical View</a></li>
          <li<?php echo ($opt==2)?' class="active"':'';?>><a href="todayfiletype1.php?graph=2">Tabular View</a></li>
    </ul>
</form>