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.