将选项卡显示为主动PHP Bootstrap JS

在php中显示为"活动"选项卡的问题。第一个选项卡将显示活动，但是当我选择下一个选项卡时，没有任何变化。这是我第一次创建PHP网页的尝试，因此将不胜感激。

<?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

它的大部分工作，我只是想完成样式。

将脚本标签放在身体标签的末端，为：

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

相关内容

最新更新

热门标签：