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
<script src="{% static "JS/master.js" %}" type="text/javascript"></script>
The .JS
$(".nav .nav-link").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).addClass("active");
});
P.S I have never done JS before
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
<script src="{% static "JS/master.js" %}" type="text/javascript"></script>
The .JS
$(".nav .nav-link").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).addClass("active");
});
P.S I have never done JS before
Share Improve this question edited Mar 29, 2019 at 8:07 PolarBear10 asked Mar 28, 2019 at 16:38 PolarBear10PolarBear10 2,3059 gold badges30 silver badges57 bronze badges 6- 2 @SO should make it pulsory to explain downvoting -,- – PolarBear10 Commented Mar 29, 2019 at 2:37
- 4 That's been proposed. The consensus is "Nope". – Tieson T. Commented Mar 29, 2019 at 3:57
- 1 Both answers are as concise as they can be at this point, based on your example. – wahwahwah Commented Mar 29, 2019 at 4:13
- 1 So the content is loading, but the tab isn't highlighted? When you click on a tab, there's a request being sent to a server and data is returned? – wahwahwah Commented Mar 29, 2019 at 4:43
- 1 Let us continue this discussion in chat. – wahwahwah Commented Mar 29, 2019 at 4:46
2 Answers
Reset to default 8The 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");
});
Further Explaining:
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.
Notes on using IDE and/or extending using {% extends '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>
And on each subsequent .html page wrap the JS with <script> </script>
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.
The first thing I'd try would be to remove the class active from nav-link and see if that works.
The next thing I'd try would be to add an "active" state to your 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.
CSS
/* Active state */
.nav-item.active a {
color: red;
}
If that doesn't work, you can use jQuery which is used by Bootstrap. Your script is close, but it's looking for .nav .nav-link, which isn't in the HTML provided. It may be in the larger context of your markup, but you could target just .nav-link to make it work.
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