Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

385
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda