Как динамически изменить цвет фона верхнего меню?

Question

Я занимаюсь разработкой сайта на Python (Django). У меня возникают трудности с изменением цвета фона верхнего меню на каждой странице.

Я занимаюсь тем, что у меня есть страница index.html и шаблоны , которые представляют собой aboutus, contactus и service , Когда я нахожусь на странице home , я получаю серый фон меню, которое является правильным. Теперь я нахожусь на грани и мне нужно изменить цвет меню с серого на черный, но я получаю только серый.

Итак, я хочу знать, как изменить класс или переопределить CSS? Должен ли я добавить класс к телу, а затем переопределить меню BG? Как динамически добавить класс в тело на каждой странице?

< Сильный > index.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title%}Home{% endblock %}</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'css/style.css'%}" type="text/css">
</head>
<body>

<div class="Wrpper">
    <header class="bg_gray"><!--top menu code--></header>
    {% block content %}
    <!-- template code -->
    {% endblock %}

    <footer><!--footer code--></footer>

</div>
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>

< Сильный > style.css

 .bg_gray{background-color: #ccc;}
 .bg_black{background-color: #000;}

aboutus.html (все шаблоны одинаковы)

{% extends 'demo1/index.html' %}
{% load static %}
<title>{% block title %}About us{% endblock %}</title>
{% block content %}
<!--some code here-->
{% endblock %}

html css jinja2

0

Naren Verma

Answer 1

Присвойте важность классу bg_black, он переопределит свойство css класса bg_gray ...

нравится,

.bg_black{
background-color: #000!important;
}

Answer 2

Вы можете добавить это в новый блок:

{% block header %}
 <header class="bg_gray">
{% endblock %}

И в about.html вы можете переопределить этот блок

{% extends 'demo1/index.html' %}
{% load static %}
<title>{% block title %}About us{% endblock %}</title>

{% block header %}
 <header class="bg_black">
{% endblock %}

{% block content %}
<!--some code here-->
{% endblock %}

Answer 3

Вы можете переопределить класс заголовка, используя JavaScript

сначала дайте заголовку идентификатор: затем включите файл javascript: в app.js

$(document).ready(function() {
            
                $('#top-header').removeClass('bg_gray');
                $('#top-header').addClass('bg_blak');
                 
             
        });

 
<link rel="stylesheet" href="{% static 'js/app.js' %}">

<header class="bg_gray" id="top-header"><!--top menu code--></header>

Как динамически изменить цвет фона верхнего меню?

3 ответа

Новые вопросы

html