Estoy tratando de activar (resaltar) el subíndice en una página en Django. Haga clic aquí para ver la imagen de muestra

Aquí están mis archivos:

inicio.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'), *** ]

ver.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)

He intentado con Javascript. Pero esto no pudo funcionar.

principal.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); }); }

Estoy usando Django, bootstrap y JS. Este código js funciona en proyectos html. Pero en Django, no funciona bien. Estaré encantado si alguien me ayuda a solucionar este problema.