Make clicked tab active in Bootstrap - django

Question

I am using Django and integrated Bootstrap with Django. Here is my HTML code for the navigation bar:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li >About</li>
<li>Contact</li>
<li class="dropdown">
Games <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>RacingDNA</li>
<li>Skater Game</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
I have written the CSS for an active navigation bar also. Here, only one navigation bar is active. I want to make the clicked navigation bar active and thus apply my CSS. My CSS is working perfect for active navigation bar and for this situation only for one.
I googled and found a solution to add this jQuery:
$('.nav.navbar-nav > li').on('click', function (e) {
e.preventDefault();
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});
Now here is where I am stuck. I don't know where to write this jQuery.
I put this file in the static/js folder and named this code nav-bar.js. However, there is no improvement. Where am I going wrong and where am I making mistakes?

Answer 1

If you dont want to send any additional context from views then you can handle it like this with resolver_match:
<li {% if request.resolver_match.url_name == 'home' %}class="active"{% endif %}>
HOME
</li>
where 'home' is the name given to your url pattern for / (probably '^$') in your urls.py.
So obviously to use this you need to name all your url patterns, which is a good practice anyway.

Answer 2

This solution didn't work when the href attribute of your links will be different from href="#". Why ? Simply because each click on a link triggers a request to the server. In your JS code, you add the method preventDefault() in order to avoid this basic behavior, but I think that not really your objective for this purpose, isn't it ?
To handle this kind of feature you can update your template code by adding something like this :
base.html
<div class="collapse navbar-collapse" id="tn-navbar-collapse">
<ul class="nav navbar-nav">
<li class="{% if nbar == 'home' %}active{% endif %}">
HOME
</li>
...
</ul>
</div>
views.py
def your_view(request):
...
return render(request, 'yourtemplate.html', {'nbar': 'home'})
With this way, you don't have to manage this feature with javascript.

Answer 3

Alternative including URL namespaces:
<li class="nav-item {% if request.resolver_match.view_name == 'scores:list' %}active{% endif %}">
<a class="nav-link" href="{% url 'scores:list' %}">Scores</a>
</li>

Answer 4

I recently ran into this problem and tried every solution I could find. Eventually, I came to this. This example assumes the path to this content is yoursite.com/about
Give your link an id.
<li><a id="about" href="#">About</a></li>
var path = $(location).attr('pathname')
var pa = path.split("/")
$('#'+pa[1]).tab('show')

Answer 5

#rphonika has give a nice answer. But if you have many navigation menus then adding template logic in each list item makes the code untidy. Menu items can be assigned a unique id, the id passed in views and active class can be assigned using a one liner javascript code in html itself.
base.html
<ul class="nav navbar-nav navbar-left">
<li><a class="navmenu-a" id="overview" href="{% url 'webapp:overview' %}">Overview</a></li>
<li><a class="navmenu-a" id="plot" href="{% url 'webapp:plot' %}">Plot</a></li>
<li><a class="navmenu-a" id="board" href="{% url 'webapp:board' %}">Board</a></li>
<li><a class="navmenu-a" id="storyboard" href="{% url 'webapp:storyboard' %}">Storyboard</a></li>
<li><a class="navmenu-a" id="freqs" href="{% url 'webapp:freqs' %}">Faq</a></li>
</ul>
.
.
.
<script type="text/javascript">
{% if nmenu %} $("a#{{nmenu}}").addClass("navmenu-a-active") {% endif %}
</script>
views.py
def overview(request):
...
return render(request, 'overview.html', {'nmenu': 'overview'})
def plot(request):
...
return render(request, 'plot.html', {'nmenu': 'plot'})
And so on for other views

Answer 6

I think the easiest solution is JavaScript / CSS:
Anyway, here is the solution using Jquery. Notice n1,n2 classes in html
In base.html
<nav>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link n1" href="{% url 'polls:dashboard' %}">
<span data-feather="home"></span>
Dashboard
</a>
</li>
<li class="nav-item">
<a class="nav-link n2" href="{% url 'polls:restaurants' %}">
<span data-feather="file"></span>
Restaurants
</a>
</li>
</ul>
</nav>
<script>
$('nav').find('{% block active_link%}{%endblock%}').addClass('active')
</script>
Then in your dashboard template:
{% block active_link %}.n1{%endblock%}
In your restaurants template:
{% block active_link %}.n2{%endblock%}

Answer 7

After adding gamer's JavaScript into your template code_here , you got to make sure you have the similar settings in your CSS file also, in order to make JavaScript work.
.navbar-nav > li.active > a {
color: #d74b4b;
background: transparent;
border-bottom: none;
}

Answer 8

I would rather prefer to only edit the template using rather than editing both views and templates for this. People needing the same, rather than following the accepted answer, may consider the below way:
<ul class="navbar-nav">
<li class="nav-item {% ifequal request.path '/' %} active {% endifequal %}">
<a class="nav-link" href="/">Home</a>
</li>
</ul
You can change 'index' above with your own

Answer 9

You can check if a string is in your URL path. This is helpful for hierarchical or nested URL paths
<li {% if 'home' in request.get_full_path %}class="active"{% endif %}>
HOME
</li>

Answer 10

If you want activate by context you can do like this variable == to context in .views
<li class="nav-item {% ifequal variable context %}active{% endifequal%}">
<a class="nav-link" href="{% url 'scores:list' %}">Scores</a>
</li>