Html Django：单击菜单项时，顶部导航栏刷新（闪烁）
我开发了一个Django应用程序，上面有一个固定的导航栏，但当点击菜单项时，它有时会闪烁/刷新。我是否在扩展模板时犯了错误，或者是其他原因造成的 以下是您可以看到的已部署的应用程序： __base.html： search_form.html： _topnavbar.html： __base.html[编辑1]： search_form.html[编辑1]： _topnavbar.html[编辑1]： __base.html[编辑2]：Html Django：单击菜单项时，顶部导航栏刷新（闪烁）,html,django,django-templates,Html,Django,Django Templates,我开发了一个Django应用程序，上面有一个固定的导航栏，但当点击菜单项时，它有时会闪烁/刷新。我是否在扩展模板时犯了错误，或者是其他原因造成的 以下是您可以看到的已部署的应用程序： __base.html： search_form.html： _topnavbar.html： __base.html[编辑1]： search_form.html[编辑1]： _topnavbar.html[编辑1]： __base.html[编辑2]： 如果您将使用WebDeveloperTools/Inspe
如果您将使用WebDeveloperTools/Inspector或类似工具，那么您将注意到在_tophavbar.html中重写样式表块是不起作用的。Js和css包含在主体内部 之所以会发生这种情况，是因为您将_topnavbar.html包含到了_base.html中，而没有扩展名。这意味着_topnavbar.html现在不再在_base.html模板中包含任何样式表块 您可以将菜单js和css移动到顶部模板。第二种解决方案是使用_menu.html->search_form.html实现不同的模板继承uuu base.html->uuuuuu base
另外，您还定义了js块，所以您可能希望在其中包含js文件，而不是在样式表中。谢谢您的回答。我想使用第一个解决方案，我做了更改，但菜单没有显示。我没有得到任何错误，只是菜单不在那里。我将添加编辑过的文件，看看我在哪里又犯了错误。在问题中添加了新代码，标记为[edit 1]@Ibo从头开始。只需将js和css从topnavbar复制到_base.html，其余的都保持原样。不要删除include，也不要添加extend anywhere。好的，现在通过您所做的编辑，菜单是固定的，不会刷新，但是菜单上名为More的下拉项不起作用，因为js不起作用。令人惊讶的是，开发人员工具中没有抛出错误。我注意到，当我将topnavbar.js移动到包含topnavbar的位置之后，问题得到了解决。我想js文件需要在加载之前加载整个DOM。我不确定是否有更好的解决办法？
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
{% block meta_tags %}{% endblock meta_tags%}
<title>
{% block title %}Azeribo Tracking{% endblock title %}
</title>
{% block stylesheets %} {% endblock stylesheets %}
{% block js %} {% endblock js %}
</head>
<body>
<header class="topnavbar" id="TNB" >
{% include 'aztracker/_topnavbar.html' %}
</header>
<div id="main" role="main">
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div> {# /#main #}
</body>
</html>
{% extends 'aztracker/__base.html' %}
{% load staticfiles %}
{% load static %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{% static 'css/__main.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/search_form.css' %}">
{% endblock %}
{% block content %}
{% block main_col %}
<section class="search_section">
<form method="POST" action="/search/">
{% csrf_token %}
<input required type="search" placeholder="Country or Code" name="search_input_field" id="search_input">
<button id="search_btn" class="flat_button">Search</button>
</form>
</section>
<!-- view all country codes link -->
<div class="wrapper">
<a id="list_of_all_countries_link" href="/countries/"> List of All Countries and Codes </a>
</div>
{% endblock main_col %}
{% endblock content %}
{% load static %}
{% load staticfiles %}
{% block stylesheets %}
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
{% endblock %}
<!--Top Navigation-->
<nav role="navigation" class="nav" id="topnav">
<ul class="nav-items">
<li class="{% if request.resolver_match.url_name == 'index' %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'index' %} class='nav-link'><span>Home</span></a>
</li>
<!--<li class="nav-item">
<a href={% url 'index' %} class="nav-link" ><span>Home</span></a>
</li>-->
<li class="{% if 'track_containers' in request.resolver_match.url_name %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'track_containers_import_data' %} class='nav-link'><span>Track Containers</span></a>
</li>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
<li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
<li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
</ul>
</nav>
</li>
<li class="{% if request.resolver_match.url_name == 'search' %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'search' %} class='nav-link'><span>Search</span></a>
</li>
<li class="{% if request.resolver_match.url_name == 'report' %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'report' %} class='nav-link'><span>Report</span></a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" id="dd-more"><span>More</span></a>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item"><a href="{% url 'about' %}" class="submenu-link">About</a></li>
<li class="submenu-item"><a href={% url 'contact_us' %} class="submenu-link">Contact us</a></li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
<li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
</ul>
</nav>
</li>
<!--
<li class="{% if 'more' in request.resolver_match.url_name %}
nav-item dropdown active
{% else %}
nav-item dropdown
{% endif %}">
<a href='#'><span>More</span></a> <!- -js will take care of dropping the menu - ->
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item"><a href={% url 'about'%} class="submenu-link">About</a></li>
<li class="submenu-item"><a href={% url 'contact_us'%} class="submenu-link">Contact</a></li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item"><a href={% url 'support'%} class="submenu-link">Support</a></li>
<li class="submenu-item"><a href={% url 'faqs'%} class="submenu-link">FAQs</a></li>
</ul>
</nav>
</li> -->
</ul>
</nav>
{% block js %}
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
{% endblock js %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
{% block meta_tags %}{% endblock meta_tags%}
<title>
{% block title %}Azeribo Tracking{% endblock title %}
</title>
<!-- styles and js required for topnavbar -->
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
{% block stylesheets %} {% endblock stylesheets %}
{% block js %} {% endblock js %}
</head>
<body>
<header class="topnavbar" id="TNB">
{% block topnavbar %}
{% include 'aztracker/_topnavbar.html' %}
{% endblock topnavbar %}
</header>
<div id="main" role="main">
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div> {# /#main #}
</body>
</html>
{% extends 'aztracker/__base.html' %}
{% load staticfiles %}
{% load static %}
{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="{% static 'css/__main.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/search_form.css' %}">
{% endblock %}
{% block content %}
{% block main_col %}
<section class="search_section">
<form method="POST" action="/search/">
{% csrf_token %}
<input required type="search" placeholder="Country or Code" name="search_input_field" id="search_input">
<button id="search_btn" class="flat_button">Search</button>
</form>
</section>
<!-- view all country codes link -->
<div class="wrapper">
<a id="list_of_all_countries_link" href="/countries/"> List of All Countries and Codes </a>
</div>
{% endblock main_col %}
{% endblock content %}
{% load static %}
{% load staticfiles %}
{% block topnavbar %}
<!--Top Navigation-->
<nav role="navigation" class="nav" id="topnav">
<ul class="nav-items">
<li class="{% if request.resolver_match.url_name == 'index' %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'index' %} class='nav-link'><span>Home</span></a>
</li>
<!--<li class="nav-item">
<a href={% url 'index' %} class="nav-link" ><span>Home</span></a>
</li>-->
<li class="{% if 'track_containers' in request.resolver_match.url_name %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'track_containers_import_data' %} class='nav-link'><span>Track Containers</span></a>
</li>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item"><a href="#" class="submenu-link">Product #1</a></li>
<li class="submenu-item"><a href="#" class="submenu-link">Product #2</a></li>
<li class="submenu-item"><a href="#" class="submenu-link">Product #3</a></li>
</ul>
</nav>
</li>
<li class="{% if request.resolver_match.url_name == 'search' %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'search' %} class='nav-link'><span>Search</span></a>
</li>
<li class="{% if request.resolver_match.url_name == 'report' %}
nav-item active
{% else %}
nav-item
{% endif %}">
<a href={% url 'report' %} class='nav-link'><span>Report</span></a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" id="dd-more"><span>More</span></a>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item"><a href="{% url 'about' %}" class="submenu-link">About</a></li>
<li class="submenu-item"><a href={% url 'contact_us' %} class="submenu-link">Contact us</a></li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item"><a href="#" class="submenu-link">Support</a></li>
<li class="submenu-item"><a href="#" class="submenu-link">FAQs</a></li>
</ul>
</nav>
</li>
<!--
<li class="{% if 'more' in request.resolver_match.url_name %}
nav-item dropdown active
{% else %}
nav-item dropdown
{% endif %}">
<a href='#'><span>More</span></a> <!- -js will take care of dropping the menu - ->
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item"><a href={% url 'about'%} class="submenu-link">About</a></li>
<li class="submenu-item"><a href={% url 'contact_us'%} class="submenu-link">Contact</a></li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item"><a href={% url 'support'%} class="submenu-link">Support</a></li>
<li class="submenu-item"><a href={% url 'faqs'%} class="submenu-link">FAQs</a></li>
</ul>
</nav>
</li> -->
</ul>
</nav>
{% endblock topnavbar %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
{% block meta_tags %}{% endblock meta_tags%}
<title>
{% block title %}Azeribo Tracking{% endblock title %}
</title>
<!-- styles and js required for topnavbar -->
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% block stylesheets %} {% endblock stylesheets %}
{% block js %} {% endblock js %}
</head>
<body>
<header class="topnavbar" id="TNB">
{% block topnavbar %}
{% include 'aztracker/_topnavbar.html' %}
{% endblock topnavbar %}
</header>
<div id="main" role="main">
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div> {# /#main #}
{% block extra-js %}
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
{% endblock extra-js %}
</body>
</html>
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
{% block meta_tags %}{% endblock meta_tags%}
<title>
{% block title %}Azeribo Tracking{% endblock title %}
</title>
<!-- styles and js required for topnavbar -->
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-iso.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/_topnavbar.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
{% block stylesheets %} {% endblock stylesheets %}
{% block js %} {% endblock js %}
</head>
<body>
<header class="topnavbar" id="TNB">
{% block topnavbar %}
{% include 'aztracker/_topnavbar.html' %}
{% endblock topnavbar %}
</header>
<div id="main" role="main">
<div class="container">
{% block content %}
{% endblock content %}
</div>
</div> {# /#main #}
{% block extra-js %}
<script type='text/javascript' src="{% static 'js/_topnavbar.js' %}"></script>
{% endblock extra-js %}
</body>
</html>