Панель навигации не работает должным образом в моем проекте 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" %}

Вернуться на верх