Question

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>

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

Answer 1

谢谢你们，谢谢大家，尤其是@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-

Answer 2

将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).hasClass('active')){
                $(this).removeClass('active');
            }
            if (this.href === url) {
                $(this).closest('li').addClass('active');
            }
        });
    });
</script>

希望它能对您有所帮助。

停留在我的导航菜单的Bootstrap活动类上

2 个答案: