I have a tab coded with CSS and JAVASCRIPT.My challenge is that only the active page opens,others don’t.
When you click on the tab menu it doesn’t work and this happened when I named my file .php but the tab works perfectly when named .html but I really need to code the App in php.

If the file is named as a .html file the tab works perfectly but when named .php it doesn’t.

<?php
    include('includes/config.php');
    include('includes/Database.php');
    include('includes/functions.php');
    secure();
    include('includes/header.php');
//var_dump($_SESSION);
?>
    <div class="container">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#home">Energy</a></li>
        <li><a href="#two">Fuel Combustion</a></li>
        <li><a href="#three">Fugitive Emission</a></li>
        <li><a href="#four">Leak Detection</a></li>
        <li><a href="#five">Carbon Credit</a></li>
      </ul>
      <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
          <h3>Energy</h3>
          <p>This is demo text!</p>
        </div>
        <div id="two" class="tab-pane fade">
          <h3>Fuel Combustion</h3>
          <p>This is demo text!</p>
        </div>
        <div id="three" class="tab-pane fade">
          <h3>Fugitive Emission</h3>
          <p>This is demo text!</p>
        </div>
        <div id="four" class="tab-pane fade">
          <h3>Leak Detection</h3>
          <p>This is demo text!</p>
        </div>
        <div id="five" class="tab-pane fade">
          <h3>Carbon Credit</h3>
          <p>This is demo text!</p>
        </div>
          </div>
        </div>

    <script>
    $(document).ready(function(){
      $(".nav-tabs a").click(function(){
     $(this).tab('show');
      });
    });
   </script>
    <?php
  include('includes/footer.php');`
    ?>