Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

386
Vistas
How to active subindex button in django using jinja2 or js?

I am trying to active(highlight) sub-index on a page in Django. Click here to see the sample image

Here are my files:

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)

I have tried to Javascript. But this could not work.

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

I am using Django, bootstrap & JS. This js code works on html projects. But in Django, It does not work well. I will be glad if anyone help me for fixing this problem.

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda