Having trouble styling the active tab in my tabbed menu created with Bootstrap. The active class seems to only affect the first tab. How can I make it work for all tabs?
Check out this screenshot for reference.
Below is the code snippet:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script>
jQuery(function($){
$(".circle").children("circle").click(function(){
$(".active").removeClass("active");
});
});
</script>
</head>
<body>
<!-- Nav tabs --><div class="d-none d-sm-block girintile">
<ul class="nav nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#section-1" role="tab"> <div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle active"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#section-2" role="tab"><div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#section-3" role="tab"><div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#section-4" role="tab"><div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#section-5" role="tab"><div class="team-box"> <img src="kisi.png" class="img-fluid rounded-circle circle"> <h4 class="no-a">Yunus Melih Gözütok</h4><p>CEO</p> </div></a>
</li>
</ul></div>
<!-- Tab panes -->
<div class="tab-content girintile "><br>
<div class="tab-pane box active" id="section-1" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok</h4><p class="text-justified girintile"> yunus</p></div>
<div class="tab-pane box" id="section-2" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok1</h4><p class="text-justified girintile"> melih</p></div>
<div class="tab-pane box" id="section-3" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok2</h4><p class="text-justified girintile"> gözütok</p></div>
<div class="tab-pane box" id="section-4" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok3</h4><p class="text-justified girintile"> lipsum</p></div>
<div class="tab-pane box" id="section-5" role="tabpanel"><h4 class="bg-grey">Yunus Melih Gözütok4</h4><p class="text-justified girintile"> lipsum</p></div>
</div>