Booststrap中当前页面的活动类
我尝试了各种组合,成功地使菜单处于活动状态,但是我不知道如何在一个菜单处于活动状态时取消激活另一个菜单……现在它们都是actice!
我的Java语言:
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(function ($) {
let url = window.location.href;
$('li a').each(function () {
if (this.href === url) {
$(this).closest('li').addClass('active');
}
});
});
</script>
我的HTML的一部分:
<div class='container-fluid' style='margin-top:70px;'>
<ul class='nav nav-pills'>
<li>
<a href='<?php $base_url ?>/admin/home.php'><span class='glyphicon glyphicon-home'></span> Home</a>
</li>
<li class="dropdown">
<a class='dropdown-toggle' data-toggle='dropdown' href='<?php $base_url ?>/admin/home.php'>
<span class='glyphicon glyphicon-book'></span> LsnC Taskforce <span class='caret'></span></a>
<ul class="dropdown-menu">
<?php
$conn = new mysqli('localhost','root','pass','mcle') or die("Database Connection Failed");
//Below We are connectin gto Database and getting all events newer than a Year.
$sql = "SELECT * FROM sessions where `date` > DATE_SUB(NOW(),INTERVAL 1 YEAR) AND event_type = 'taskforce'";
$res = mysqli_query($conn,$sql);
while ($row = mysqli_fetch_array($res))
{
echo "<li><a href='$base_url/admin/sessions.php?idx={$row['event_id']}'> <span class=''>{$row['pro_title']}<span></a></li>";
}
?>
</ul>
</li>
<li class="dropdown">
<a class='dropdown-toggle' data-toggle='dropdown' href='<?php $base_url ?>/admin/home.php'>
<span class='glyphicon glyphicon-book'></span> LsnC All Staff <span class='caret'></span>
</a>
<ul class="dropdown-menu">
<?php
$sql = "SELECT * FROM sessions where `date` > DATE_SUB(NOW(),INTERVAL 1 YEAR) AND event_type = 'allstaff'";
$res = mysqli_query($conn,$sql);
while ($row = mysqli_fetch_array($res))
{
echo "<li><a href='$base_url/admin/sessions.php?idx={$row['event_id']}'> <span class=''>{$row['pro_title']}<span></a></li>";
}
?>
</ul>
</li>
</ul>
</div>
没有错误提示它只是不会选择活动和当前链接,它现在选择主页,然后选择下三个下拉菜单作为活动... 任何帮助都表示赞赏。 非常感谢 ! 埃德-