Как активировать кнопку суб-индекса в django с помощью jinja2 или js?

Я пытаюсь активировать (выделить) подындекс на странице в Django. Нажмите здесь, чтобы увидеть пример изображения

Вот мои файлы

home.html

<div class="col-md-2 text-left" id="subIndex">
            <br><br>
            <h5 class="text-primary">CATEGORIES</h5>
            <!-- <a href="/" class="abc btn btn-outline-success my-1 " style="width: 100%; text-align: left;">All Products </a> -->
            <a href="/" class="abc btn btn-outline-success my-1 " style="width: 100%; text-align: left;">All Products </a>
            
            <!-- Here href="/?category={{category.id}}" generates the category link -->
            {% for category in categories %}
            <a href="/?category={{category.id}}" class="btn btn-outline-success my-1 {% if category.id in request.get_full_path %} active {% endif %}" style="width: 100%; text-align: left;">{{category}} </a>               
            {% endfor %}

 </div>

urls.py

from django.urls import path
from home import views
urlpatterns = [
path('', views.home, name='home'),
***
]

view.py

from admn import models as AMODEL
def home(request):
    categories = AMODEL.product_category.objects.all()
    context = {
      'categories' : categories,
        }
     return render(request, 'home/home.html', context)

Я пробовал использовать Javascript. Но это не сработало.

main.js

// Add active class to the current button (highlight it)
let hd = document.getElementById("subIndex");
let btnss = hd.getElementsByClassName("btn");
console.log(btnss)
for (let i = 0; i < btnss.length; i++) {
btnss[i].addEventListener("click", function () {
let current = document.getElementsByClassName("active");
if (current.length>0){
current[0].className = current[0].className.replace(" active", "");
// console.log(current[0])
}
// current[0].className = current[0].className.replace(" active", "");
this.className += " active";
console.log(this.className);
 });
}

Я использую Django, bootstrap & JS. Этот js код работает в html проектах. Но в Django он работает плохо. Я буду рад, если кто-нибудь поможет мне решить эту проблему.

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