Bootstrap 4高亮导航栏激活 [英] Bootstrap 4 highlight navbar Active

问题描述

如何在点击时突出显示当前页面?

How to highlight the current page on click ?

导航栏

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link active" href="{% url 'page1' %}"> Football
                <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="{% url 'page2' %}">Overview</a>
        </li>
    </ul>
</div>

.html末尾的脚本

The script at the end of the .html

<script src="{% static "JS/master.js" %}" type="text/javascript"></script>

.JS

$(".nav .nav-link").on("click", function(){
   $(".nav").find(".active").removeClass("active");
   $(this).addClass("active");
});

我以前从未做过JS

推荐答案

发生这种情况的原因是，当您单击链接时，您将被重定向到新页面.因此，通过JS设置的样式将重置.我要做的是为每个导航元素设置一个id，然后在页面加载时添加活动类，如下所示:

The reason this happens is because when you click the link, you get redirected to a new page. So the styles set through JS reset. What I would do is set an id to each of your nav elements and then on page load add the active class, like this:

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <ul class="navbar-nav">
        <li id="link-football" class="nav-item active">
            <a class="nav-link active" href="{% url 'page1' %}"> Football
                <span class="sr-only">(current)</span></a>
        </li>
        <li id="link-overview" class="nav-item">
            <a class="nav-link" href="{% url 'page2' %}">Overview</a>
        </li>
    </ul>
</div>

然后在页面加载中，您可以执行以下操作:

then on page load you can do this:

//on the football page
$(document).ready(function(){
   $(".active").removeClass("active");
   $("#link-football").addClass("active");
});

进一步的解释:

通过javascript添加的任何样式都会反映在DOM中，但不会覆盖源文件.因此，您的静态页面在足球页面上始终设置为 .active .通过F5或JS脚本加载/重新加载页面时，也将重新加载该静态文件，而不会反映通过JS完成的任何更改.这就是为什么我说要在页面加载后添加 active 类 ，原因是您可能知道自己所在的页面，因此调用了活动链接.

Any style you add through javascript gets reflected in the DOM, but it does not override the source file. So your static page always has .active set on the football page. When you load/reload the page either through F5, or a JS script, you also reload that static file with none of the changes done through JS being reflected. This is why I say to add the active class after the page loads, cause then you may know what page you're on, and therefore callout the active link.

我还建议默认情况下不要将任何内容设置为活动状态.您可以将主页设置为默认活动状态，我知道这种情况会发生，但是如果您忘记将上述脚本添加到新页面中，则可能会使自己感到困惑.

I would also suggest not having anything set as active by default. You can do the homepage as default active, I see that happen, but it might cause yourself some confusion down the road if you forget to add the above script to a new page.

有关使用IDE和/或使用 {％extension'base.html'％}

Notes on using IDE and/or extending using {% extends 'base.html' %}

要使其在扩展 ** base.html ** 时起作用，请在页面末尾添加 {％块内容％} .即

To get it to work when extending the **base.html**, add the {% block content %}towards the ends of the page. i.e.

{% block content %}

{% endblock %}
</body>
</html>

在随后的每个 .html 页面上，将 JS 包裹在 < script></script>

And on each subsequent .html page wrap the JS with <script> </script>

这篇关于Bootstrap 4高亮导航栏激活的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！