HTML-шаблон навигации, управление активными/неактивными кнопками без DRY ⇐ CSS

[Anonymous]

Я реализую приложение форума Django, в нем есть панель навигации. Стилизован так, чтобы выбранные страницы сайта отображались в «активном» стиле (например, более яркая кнопка), а другие — в «неактивном» (раскрашенном как обычно).
Как в обычный макет шаблона, у меня есть базовый шаблон "base.html", в который должны быть включены заголовок с текущим временем, панель авторизации и панель навигации, а для других шаблонов, наследующих базовый шаблон.
Но я не знаю, как реализовать переключение стиля «активный/неактивный» для кнопок навигационной панели, поэтому на данный момент я обрабатываю это отдельной навигационной панелью для каждый шаблон, нарушающий принцип СУХОЙ КАК АД:
base.html (довольно бесполезен, так как один и тот же код включен в каждый второй шаблон сайта):
{% load static %}






{{title}}



{% include 'inc/_timedate.html' %}
{% include 'inc/auth.html' %}

Home
About
Characters
Episodes
Forum



{% block content %}
{% endblock %}

{% block pagination %}
{% endblock %}




Итак, как вы можете видеть, кнопка, отображаемая в «активном» стиле, является кнопкой главной страницы (стиль btn active). AFAIC, панель навигации можно поместить в папку «includes» и добавить в шаблоны через {% include '' %}, как я это сделал с «timedate.html» и «auth.html». Но для этого мне нужно решение (возможно, скрипт), который меняет стиль кнопок панели навигации в зависимости от их статуса, выбранного пользователем.
Я искал такие скрипты в Google (я Я ноль в JS, я могу понять его логику и синтаксис, так как он очень похож на C, но не воспроизводит его), и нашел тот, который, похоже, помогает (я поставил его сразу после раздел , в конце раздела ):

var header = document.getElementByClassName("navbar");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns.addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}


но, к сожалению, это не так.
Можете ли вы дать мне совет/подсказку/решение?
styles.css (при необходимости):
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/* Конец сброса CSS */

#current-date {
color: #FFFFFF;
font-size: 14px;
font-weight: 500;
line-height: 20px;
}
.navbar {
width: 700px;
height: 20px;
padding: 10px 12px 15px 0;
margin: 0 0 10px 0;
overflow: hidden;
background-color: #1B182B;
}
.navbar .btn {
float: left;
color: #f2f2f2;
text-align: center;
padding: 10px 12px 10px 12px;
text-decoration: none;
font-size: 17px;
font-weight: 500;
background-image: radial-gradient(rgba(83, 50, 128, .84), rgba(71, 11, 150, .84) 80%);
}
.navbar .btn:hover {
background-color: yellow;
color: #1B182B;
}
.navbar .btn.active {
background: #5214b8;
color: white;
cursor: pointer;
}
.navbar .btn.inactive {
background: #462f6b;
color: grey;
cursor: default;
}



Подробнее здесь: https://stackoverflow.com/questions/791 ... ithout-dry