Панель навигации не работает должным образом в моем проекте Django
Я создал горизонтальную навигационную панель в верхней части моей страницы. Я использовал код на w3school и попробовал javascript сниппет из поста stackoverflow, который я нашел несколько месяцев назад. Я использую Django. Я столкнулся с двумя проблемами, которые не могу решить или понять.
Я вставляю свой код сюда. Одна навигация.html:
<div id="id_topnav" class="topnav">
<a href="{% url 'myapp:index'%}">Home</a>
<a href="{% url 'myapp:help'%}">Help</a>
<a href="{% url 'myapp:test'%}">Test</a>
</div>
У меня есть style.css:
body {
margin: 10;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: red;
position: fixed;
top: 0;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: orange;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover:not(.active) {
background-color: blue;
color: black;
}
.topnav a:focus
{
background-color: pink;
}
На моей домашней странице,
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'main/style.css' %}">
{% include "myapp/navigation.html" %}
......and other lines below
myapp\static\main\style.css
Моя первая проблема заключается в том, что когда я изменил цвета в style.css, любой цвет в разделе .topnav или .topnav a, я не увидел никаких изменений цвета ни на одной из моих страниц. После изменения кода я запускаю py manage.py collectstatic для обновления папки static и py manage.py runserver 127.0.0.1:8000 для перезапуска моего сервера. Я не вижу никаких изменений цвета. Когда я удаляю <link rel="stylesheet" type="text/css" href="{% static 'main/style.css' %}">
, он немедленно меняется на отсутствие стиля. Но при изменении некоторых атрибутов в style.css ничего не происходит. Поэтому мне интересно, кэширует ли браузер стиль? Или я пропустил какую-то важную процедуру Django?
Вторая проблема заключается в том, что я хочу, чтобы вкладки на панели навигации сохраняли уникальный цвет при нажатии. Например, первоначальный цвет фона - зеленый, при наведении - желтый, после нажатия - синий. Используемые цвета не важны, но мне нужно быстрое изменение. Я попробовал некоторые javascript из некоторых находок, как показано ниже (сниппет, кажется, работает для кого-то, но не для меня):
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$('#id_topnav').on('click','a', function ( e ) {
alert( "debug 1" )
e.preventDefault();
$(this).parents('#id_topnav').find('.active').removeClass('active').end().end().addClass('active');
$(activeTab).show();
});
$(document).ready(function() {
$('#id_topnav').click(function(event){
alert( "debug 2" )
var elementType = $("#id_topnav").find(":clicked").attr("href"))
$("#id_topnav").children('a').find(":selected").toggleClass('clicked');
});
});
</script>
Я поместил этот сниппет в файл navigation.html после <div id="id_topnav" class="topnav">...</div>
Ни alert( ), ни alert( ) никогда не срабатывали. Я не знал, почему. Не уверен, имеют ли эти две проблемы какую-либо связь? Я попробовал переместить JS-код из navigation.html на домашнюю страницу, которая включает в себя navigation.html, но тоже никакого эффекта.
Могу ли я использовать JS или Jquery код в Django included html? {% include "myapp/navigation.html" %}