Question

我正在使用python（Django）开发网站。在更改每个页面顶部菜单的背景颜色时，我遇到了一些困难。

我正在做的是，我有一个index.html页面和templates，分别是aboutus, contactus和service。当我进入home页面时，我得到了正确的菜单灰色背景。现在我正在使用Aboutus，必须将菜单颜色从灰色更改为黑色，但是我只能得到灰色。

所以我想知道如何更改类或覆盖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 %}

Answer 1

您可以使用javascript覆盖标头的类

首先给您的标头提供一个id：然后加入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>

Answer 2

对bg_black类很重要，它将覆盖bg_gray类属性的css ...

像这样

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

html：

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

如何动态更改顶部菜单的背景颜色？

2 个答案: