Boostrap tab panel works only once

Question

i use a tab panel with bootstrap framework. It works fine... the first time i click on a link. After that, the panel content doesnt' change , and the class 'active' is not added to the appropriate element

here my code:

<nav class="navbar navbar-default navbar-fixed-bottom" style="background-color: #000;">	
 <div class="container"> 
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-left">
    <li class="hidden">
      <a href="#page-top"></a>
    </li>
    <li>
      <div class="dropup" id="menu">
        <button class="btn dropdown-toggle" type="button"             data-toggle="dropdown" style="padding-top: 15px;             padding-bottom: 15px; background-color: #000;               color:#fff; border: none;font-family:               Montserrat;">HOME
          <span class="caret"></span>
       </button>
	    <ul class="dropdown-menu nav nav-tabs">
          <li><a href="#origine" data-toggle="tab" role="tab">Notre origine</a></li>
          <li><a href="#volonte" data-toggle="tab" role="tab">Notre volonté</a></li>
          <li><a href="#website" data-toggle="tab" role="tab">Notre site</a></li>
          <li><a href="#securite" data-toggle="tab" role="tab">Notre sécurité</a></li>						      
          <li><a href="#groupe" data-toggle="tab" role="tab">Notre groupe</a></li>						      
          <li><a href="#realisations" data-toggle="tab" role="tab">Nos réalisations</a></li>
							      
        </ul>
      </div>
    </li>
    <li>
      <a class="page-scroll" href="#connexion" style="color:#fff;" data-toggle="modal" data-target="#connexion">Connexion</a>
     </li>
	  <li>
	    <a class="page-scroll" href="#portfolio" style="color:#fff;">Actualités</a>
	  </li>
	  <li>
	     <a class="page-scroll" href="#contact" style="color:#fff;" data-toggle="modal" data-target="#contact">Contact</a>
	    </li>
	  </ul>
	</div>
  </div>
</nav>
  <div class="tab-content navbar-fixed-bottom" style="background-color:#000; color:#fff;opacity:0.8; width: 60%; margin: auto; bottom:20%;">
	<div id="origine" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;">
		  <h2>Notre origine</h2>
				ertyrtyty
	</div>
	<div id="volonte" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;">
		  <h2>Notre volonté</h2>				
				dfghdfghdfghgh
	</div>
	<div id="website" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;">
				<h2>Notre site</h2>
				dfghgfhdgfh
	</div>
	<div id="securite" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;">
		<h2>Notre sécurité</h2>
				securite
	</div>
	<div id="groupe" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;">
		<h2>Nos valeurs ajoutées</h2>				.
				gfdhfghfgh
	</div>
	<div id="realisations" class="tab-pane fade" role="tabpanel" style="padding: 20px 10px;">
		<h2>Nos réalisations</h2>
				realsiations
	</div>
  </div>

I've search the subject but did not found any solution

Answer 1

Ok, i found a solution I noticed that the class 'active' was added to the li elements from the dropup menu on click on their a child and was not removed after clicking on another a element from this menu

so i added this code:

$('#menu a').click(function (e) {
   e.preventDefault();
   $(this).parent().removeClass('active');
});

It's working fine now

Answer 2

I had the same issue with Bootstrap 4 alpha. I found it was because I didn't add some classes to the anchor and list elements.

The structure should be like this:

 <ul class="nav nav-tabs">
     <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#panel1">Panel1</a></li>
     <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#panel2">Panel2</a></li>
  </ul>