时间戳

首页 > 解决方案 > 卡在我的导航菜单的 Bootstrap 活动类

bootstrap-4 - 卡在我的导航菜单的 Bootstrap 活动类

问题描述

Booststrap 中的活动类到当前页面

我尝试了各种组合，我成功地使菜单处于活动状态，但我不知道如何在一个菜单上禁用活动而另一个菜单处于活动状态......他们现在都行动了！

我的Javascript：

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

没有错误 mrssages 它只是不会选择活动和当前链接，它现在选择主页和下一个 3 下拉菜单作为活动...任何帮助都非常感谢。非常感谢 ！埃德-

标签： bootstrap-4

解决方案

谢谢你们，谢谢大家，特别是@Khalid Khan，他花时间回答我的问题。我终于找到了答案：

<script>
$(document).ready(function () {
var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');

// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function () {
    return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
});
</script>
Now my dropdown is working[enter image description here][1] as expected. Thank you again, All.
Ed-

推荐阅读