更改引导导航栏中的活动类不保留在继承的Django模板中 [英] Changing active class in bootstrap navbar not staying in inherited Django template
本文介绍了更改引导导航栏中的活动类不保留在继承的Django模板中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的导航栏位于base.html模板中，该模板可扩展到所有页面. 当我单击导航栏中的链接时，将添加活动的类，但是当我转到该页面后，当仅突出显示初始页面时，它会恢复为以前的状态.
My navbar lives in a base.html template which is extended by all pages. When I click a link in the navbar the active class is added but right after when I travel to that page it reverts to its previous state when only the initial page was highlighted.
这是我的base.html模板
Here is my base.html template
{% load static %}
<!-- DOCTYPE html -->
<html>
<head>
<title>Title</title>
<!-- new bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://use.fontawesome.com/a0c7be9623.js"></script>
<!-- css -->
<link rel='stylesheet' href='{% static "css/base.css" %}' />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href='{% url "home" %}'>Maximum Likelihood</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link active" href='{% url "home" %}'>Info<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href='{% url "about" %}'>About</a>
<a class="nav-item nav-link" href='{% url "stuff" %}'>Stuff</a>
</div>
<div class="navbar-nav">
<a class="nav-item nav-link ml-auto" href='google.com'>Outside link</a>
</div>
</div>
</nav>
{% block content %}
{% endblock content %}
<br>
<!-- <!-- bootstrap's js stuff -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src='{% static "js/nav.js" %}'/></script>
</body>
这是我的nav.js
Here is my nav.js
$(".nav-link").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).addClass("active");
});
推荐答案
最好的方法是使用django block base.html
<!-- codes here -->
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link {% block nav_item_home %}{% endblock nav_item_home %}" href='{% url "home" %}'>Book Materials <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link {% block nav_item_about %}{% endblock nav_item_about %}" href='{% url "about" %}'>About</a>
<a class="nav-item nav-link {% block nav_item_stuff %}{% endblock nav_item_stuff %}" href='{% url "stuff" %}'>Stuff</a>
</div>
当您处于继承的模板中时
when you are in the inherited template
只需在extends之后将其添加到页面顶部即可.
假设我们在关于"页面中:
just add this in the top of your page after extends of course.
Let's say we are in the about page:
{% extends 'base.html' %}
{% block nav_item_about %}active{% endblock nav_item_about %}
这篇关于更改引导导航栏中的活动类不保留在继承的Django模板中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
