javascript - Is there any way to refresh div when clicked on bootstrap tab in jQuery?

Question

I have problem as below:

    <div class="btn-choice">
        <button type="button" class="btn" id="active-all">All</button>
        <button type="button" class="btn active" id="btn-a">A</button>
        <button type="button" class="btn" id="btn-a">B</button>
        <button type="button" class="btn" id="btn-a">C</button>
        <button type="button" class="btn btn-default" id="btn-a">D</button>
    </div>


$("#active-all").click(function(){
    $('.btn').toggleClass('active');
});

I have added active class to button whenever I click active-all button. I found this active class still exist to every tab that I have those HTML button. So that I want refresh that div every time I clicked tab.

I try with jQuery load() and reload() but this seems not solving my problem.

UDATE I have added active class to button when I clicked active-all button. I found this active class still exist even I go forward or backward to another page. So that I want to find a way refresh that div every time I go forward or backward to another page.

question from:https://stackoverflow.com/questions/65949701/is-there-any-way-to-refresh-div-when-clicked-on-bootstrap-tab-in-jquery

Answer 1

Need something like this?

$(".btn").click(function(){    
    if (this.id === 'active-all') {      
      $(".btn", $(this).parent()).toggleClass('active');
    }
});

.active {
  background-color: #4CAF50;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="firstTab">
  <div class="btn-choice">
    <button type="button" class="btn" id="active-all">All</button>
    <button type="button" class="btn" id="btn-a">A</button>
    <button type="button" class="btn" id="btn-a">B</button>
    <button type="button" class="btn" id="btn-a">C</button>
    <button type="button" class="btn btn-default" id="btn-a">D</button>
  </div>
</div>


<div id="secondTab">
  <div class="btn-choice">
    <button type="button" class="btn" id="active-all">All</button>
    <button type="button" class="btn" id="btn-a">A</button>
    <button type="button" class="btn" id="btn-a">B</button>
    <button type="button" class="btn" id="btn-a">C</button>
    <button type="button" class="btn btn-default" id="btn-a">D</button>
  </div>
</div>