[英]Bootstrap 4 highlight navbar Active
How to highlight the current page on click ? 如何在点击时突出显示当前页面?
The nav-bar 导航栏
<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>
The script at the end of the .html .html末尾的脚本
<script src="{% static "JS/master.js" %}" type="text/javascript"></script>
The .JS .JS
$(".nav .nav-link").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).addClass("active");
});
PS I have never done JS before PS我以前从未做过JS
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.
因此,通过JS设置的样式将重置。 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:
我要做的是为每个导航元素设置一个id,然后在页面加载时添加活动类,如下所示:
<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");
});
Further Explaining: 进一步说明:
Any style you add through javascript gets reflected in the DOM, but it does not override the source file. 您通过javascript添加的任何样式都会反映在DOM中,但不会覆盖源文件。 So your static page always has
.active
set on the football page. 因此,您的静态页面在足球页面上始终设置为
.active
。 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. 通过F5或JS脚本加载/重新加载页面时,也将重新加载该静态文件,而不会反映通过JS完成的任何更改。 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. 这就是为什么我说要在页面加载后添加
active
类,原因是您可能知道所在的页面,并因此调用了活动链接。
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.
您可以将主页设置为默认活动状态,我知道这种情况会发生,但是如果您忘记将上述脚本添加到新页面中,则可能会引起混乱。
Notes on using IDE and/or extending using {% extends 'base.html' %}
有关使用IDE和/或使用
{% extends 'base.html' %}
To get it to work when extending the **base.html**
, add the {% block content %}
towards the ends of the page. 要使其在扩展
**base.html**
时起作用,请在页面末尾添加{% block content %}
。 ie 即
{% block content %}
{% endblock %}
</body>
</html>
And on each subsequent .html page wrap the JS with <script> </script>
然后在每个后续的.html页面上,用
<script> </script>
包裹JS 。
I can't tell what's going on in JS/master.js
, but you have the class active
in both your nav-item
and nav-link
. 我不知道
JS/master.js
发生了什么,但是您在nav-item
和nav-link
中都active
了该类。
The first thing I'd try would be to remove the class active
from nav-link
and see if that works. 我要尝试的第一件事是从
nav-link
删除active
的类,然后查看是否可行。
The next thing I'd try would be to add an "active" state to your CSS. 我接下来要尝试的是在CSS中添加“活动”状态。 I see Liquid tags in your
script src
, so if you're using a pre-made Jekyll theme it may already be adding the appropriate active state to the markup. 我在
script src
看到Liquid标签,因此,如果您使用的是预制的Jekyll主题,则它可能已经在标记中添加了适当的活动状态。
CSS 的CSS
/* Active state */
.nav-item.active a {
color: red;
}
If that doesn't work, you can use jQuery which is used by Bootstrap. 如果这不起作用,则可以使用Bootstrap使用的jQuery。 Your script is close, but it's looking for
.nav .nav-link
, which isn't in the HTML provided. 您的脚本很接近,但是正在寻找
.nav .nav-link
,它不在提供的HTML中。 It may be in the larger context of your markup, but you could target just .nav-link
to make it work. 它可能是在标记的更大上下文中使用的,但您可以仅将
.nav-link
定位为目标。
jQuery jQuery的
var activeNavItem = $('.nav-item');
activeNavItem.click(function(){
activeNavItem.removeClass('active');
$(this).addClass('active');
});
That may or may not be helpful depending on your context. 根据您的情况,这可能会或可能不会有帮助。 Here's a working demo on CodePen: https://codepen.io/mikejandreau/pen/BbXKZV
这是有关CodePen的工作演示: https ://codepen.io/mikejandreau/pen/BbXKZV
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.