将Tab显示为活动的php bootstrap js
[英]Show Tab as active 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
它主要工作，我只是想完成样式。
1 个解决方案
解决方案1
1 已采纳 2018-02-21 16:36:01
将script标签放在body标签的末尾，如下所示：
<script>
$('.nav.navbar-nav > li').on('click', function (e) {
e.preventDefault();
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
</script>
</body>
Bootstrap：“活动”标签应显示在页面加载中
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.