CODEWITHSUNDEEP
javascriptphphtml
Harvdawg
Harvdawg

Reputation: 75

Show Tab as active php bootstrap js

Having issues with showing tab as active in php. The first tab will show active but nothing changes when I select the next. This is my first attempt at creating a php webpage so any help would be greatly appreciated.

<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <title><?php echo $page_title; ?></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/main.css?version=51">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
$('.nav.navbar-nav > li').on('click', function (e) {
    e.preventDefault();
    $('.nav.navbar-nav > li').removeClass('active');
    $(this).addClass('active');
});
    </script>
</head>
<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    <div class="navbar-text h3">
     <span class="text-bottom">SSI-Portal</span>
    </div>
    </div>
    <div class="navbar-collapse collapse" id="myNavbar">
      <ul class="nav navbar-nav">
      <li class="active"><a href="./sop.php">SOP</a></li>
        <li><a href="./time.php">Time Accounting</a></li> 
        <li><a href="./expense.php">Expenses</a></li>
      <?php if ($_SESSION['perm'] == 2) { echo 
        '<li><a href="./manage.php">Managers</a></li>';
      }
      ?>
      <?php if ($_SESSION['perm'] == 3) { echo 
        '<li><a href="/accounting.php">Accounting</a></li>';
      }
      ?>
          <?php if ($_SESSION['perm'] == 4) { echo
        '<li><a href="./manage.php">Managers</a></li>
        <li><a href="./accounting.php">Accounting</a></li>
        <li><a href="./admin.php">Admin</a></li>';
      }
      ?>

      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span> Logout</a></li>
      </ul>
    </div>
  </div>
</nav>
</body>
</html

Its mostly working, I'm just trying to finish up the styling.

Upvotes: 0

Views: 53

Answers (1)

yaxe
yaxe

Reputation: 365

Place the script tag at the end of body tag as:

<script>
$('.nav.navbar-nav > li').on('click', function (e) {
e.preventDefault();
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
</script>
</body>

Upvotes: 1

Related Questions