douyan1896
douyan1896
2014-09-24 11:59

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

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');
     });
});
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • dongmei1828 dongmei1828 7年前

    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> 
    
    点赞 评论 复制链接分享