1

$(document).ready(function(){
  $('.scroll_nav li a').click(function(){
      $('li a').removeClass("active_scroll");
      $(this).addClass('active_scroll');
    $('ul li .btn-br_all_gun').click(function(){
      $('li a').removeClass("active_scroll");
        
  });
        
  });
});
<li><a href="{% url 'gun:browse_gun' %}" class="btn btn-br_all_gun">Browse All Your Guns</a></li>
    
{% for gunName in gunModelUserTieIn %}
     <li><a href="#">{{ gunName.gun_model.model_name }}</a></li>
{% endfor %}
Browse all gun button is the static button. and remaining tabs are came dynamically in user select cases. Here When i click the other tabs the page is reloading that's why it will again shows the first:li a tab is active. how to solve this problem
Manikanta
  • 325
  • 6
  • 20
  • 1
    You need to store the active tab somewhere (eg a cookie, a fragmentin the URL, session/local storage) and then retrieve the state and set the classes on the tabs based on that. – Rory McCrossan Jan 09 '18 at 15:41
  • https://stackoverflow.com/questions/29907609/how-to-keep-active-class-when-changing-pages answered before – zagzter Jan 09 '18 at 15:52
  • Can also use different url hashes in href and parse url hash on page load – charlietfl Jan 09 '18 at 15:59

1 Answers1

0
  #This code will work

  $("#innovs_tabs").tabs({
      active: localStorage.getItem("currentIdx"),
      activate: function(event, ui) {
      localStorage.setItem("currentIdx", $(this).tabs('option', 'active'));
    }
  });
Kawsar Ahmed
  • 1
  • 3