Question

我已经尝试了几次迭代，但似乎无法让我的活动类在Bootstrap导航栏上进行更改（在Bootstrap 4中）。当我点击一个新菜单选项时，它会开始更改为活动类，但会立即更改回“主页”选项为活动状态。

这是我的导航栏：

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/blast-text@2.0.0/jquery.blast.min.js"></script>
<h1>This is a headline</h1>

和我的js代码：

 <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="{% url 'home' %}">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
             <li class="nav-item">
                <a class="nav-link" href="/blog">Blog</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>

            <li class="nav-item btn-group">
                <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Deals
                </a>
                <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>

Answer 1

您不需要任何自定义JavaScript。你需要bootstrap.js（以及jQuery）。

不要试图重新发明轮子。使用已经存在的“轮子”。

您需要加载以下3个文件（按此顺序）：

您的导航栏还缺少文档中描述的其他部分：

https://getbootstrap.com/docs/4.0/components/navbar/

Bootstrap菜单更改活动类更改不起作用

1 个答案: