更改引导程序导航栏中的活动类不留在继承的 Django 模板中
[英] Changing active class in bootstrap navbar not staying in inherited Django template
本文介绍了更改引导程序导航栏中的活动类不留在继承的 Django 模板中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的导航栏位于由所有页面扩展的 base.html 模板中.当我单击导航栏中的链接时，会添加活动类，但在我转到该页面后，它会在仅突出显示初始页面时恢复到以前的状态.
这是我的 base.html 模板
{% 加载静态 %}<!-- DOCTYPE html --><头><title>标题</title><!-- 新引导程序--><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcFAgWiGinAmAmFcFAGORIGINSIGINX"><script src="https://use.fontawesome.com/a0c7be9623.js"></script><!-- css --><link rel='stylesheet' href='{% static "css/base.css" %}'/><身体><nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"><a class="navbar-brand" href='{% url "home" %}'>最大似然</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle导航"><span class="navbar-toggler-icon"></span><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" %}'>关于</a><a class="nav-item nav-link" href='{% url "stuff" %}'>Stuff</a>
<div class="navbar-nav"><a class="nav-item nav-link ml-auto" href='google.com'>外部链接</a>
</nav>{% 块内容 %}{% 端块含量 %}<br><!-- <!-- bootstrap 的 js 东西--><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1YJ2taori="匿名"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65"<script src='{% static "js/nav.js" %}'/></script>
这是我的 nav.js
$(".nav-link").on("click", function(){$(".nav").find(".active").removeClass("active");$(this).addClass("active");});
解决方案
最好的方法是使用 django block 更多信息
base.html
<div class="navbar-nav mr-auto"><a class="nav-item nav-link {% block nav_item_home %}{% endblock nav_item_home %}" href='{% url "home" %}'>图书资料 <span class="sr-only">(当前)</span></a><a class="nav-item nav-link {% block nav_item_about %}{% endblock nav_item_about %}" href='{% url "about" %}'>关于</a><a class="nav-item nav-link {% block nav_item_stuff %}{% endblock nav_item_stuff %}" href='{% url "stuff" %}'>Stuff</a>
当你在继承的模板中时
当然，只需在 extends 之后将其添加到页面顶部即可.
假设我们在关于页面:
{% 扩展 'base.html' %}{% block nav_item_about %}active{% endblock nav_item_about %}
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.
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>
Here is my nav.js
$(".nav-link").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).addClass("active");
});
解决方案
Best approach is to use django block more info
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
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屋！
