Implementing an active class to an element based on the current URL using Jquery in Django

Question

Implementing an active class to an element based on the current URL using Jquery in Django

Is there a way to dynamically add an "active" class to an element based on the href?

This is what my template in Django looks like:

<div class="panel side-panel-1 category">
<h4 class="title1">Sections</h4>
<ul class="clear-list">
{% for section in sections %}
    <li>
        <a href="/advert/adverts.aspx&sec{{ section.id }}">{{ section.name }}  ({{ section.advert_set.count }})</a>
    </li>
{% endfor %}
</ul>

The URLs will be generated using section.id

For example:

mysite.com/advert/adverts.aspx&sec1

In some cases, it may look like this:

mysite.com/advert/adverts.aspx&sec1&cat10&page1

jquery css django

Answer 1

Answer №1

Perhaps you could consider using the following code snippet:

class="{{ section.id ? 'active' : '' }}"

. This will add the 'active' class if the section.id exists.

<div class="panel side-panel-1 category">
<h4 class="title1">Sections</h4>
<ul class="clear-list">
{% for section in sections %}
    <li class="{{ section.id ? 'active' : '' }}" >
        <a href="/advert/adverts.aspx&sec{{ section.id }}">{{ section.name }}  ({{ section.advert_set.count }})</a>
   </li>
{% endfor %}
</ul>

Answer 2

Perhaps you could consider using the following code snippet:

class="{{ section.id ? 'active' : '' }}"

. This will add the 'active' class if the section.id exists.

<div class="panel side-panel-1 category">
<h4 class="title1">Sections</h4>
<ul class="clear-list">
{% for section in sections %}
    <li class="{{ section.id ? 'active' : '' }}" >
        <a href="/advert/adverts.aspx&sec{{ section.id }}">{{ section.name }}  ({{ section.advert_set.count }})</a>
   </li>
{% endfor %}
</ul>

Answer 3

Answer №2

Within the views.py file:

def display_adverts_by_section(request, advert_sec):
args = {}
args.update(csrf(request))
args['adverts'] =  Advert.objects.filter(advert_section_id=advert_sec).order_by('-advert_date', '-id')
args['sections'] = AdvertSection.objects.all().order_by('-name')
args['categs'] = AdvertCategory.objects.all().order_by('-name')
args['current_section'] = AdvertSection.objects.get(id=advert_sec)
args['username'] = auth.get_user(request).username
args['reg_form'] = MyRegistrationForm()
return render_to_response('adverts_sec.html', args)

Then, in the template:

{% for section in sections %}
    <li class="{% if section.id == current_section.id %}
                    active
                {% else %}
                {% endif %}">
        <a href="/advert/adverts.aspx&sec{{ section.id }}">{{ section.name }}  ({{ section.advert_set.count }})</a>
    </li>
{% endfor %}

If we have a "current_section", Django will compare it to the {{ section.id }} and the matching one will be assigned the 'active' class.

A big thanks to everyone who contributed!

Answer 4

Within the views.py file:

def display_adverts_by_section(request, advert_sec):
args = {}
args.update(csrf(request))
args['adverts'] =  Advert.objects.filter(advert_section_id=advert_sec).order_by('-advert_date', '-id')
args['sections'] = AdvertSection.objects.all().order_by('-name')
args['categs'] = AdvertCategory.objects.all().order_by('-name')
args['current_section'] = AdvertSection.objects.get(id=advert_sec)
args['username'] = auth.get_user(request).username
args['reg_form'] = MyRegistrationForm()
return render_to_response('adverts_sec.html', args)

Then, in the template:

{% for section in sections %}
    <li class="{% if section.id == current_section.id %}
                    active
                {% else %}
                {% endif %}">
        <a href="/advert/adverts.aspx&sec{{ section.id }}">{{ section.name }}  ({{ section.advert_set.count }})</a>
    </li>
{% endfor %}

If we have a "current_section", Django will compare it to the {{ section.id }} and the matching one will be assigned the 'active' class.

A big thanks to everyone who contributed!

Implementing an active class to an element based on the current URL using Jquery in Django

For example:

In some cases, it may look like this:

Answer №1

Answer №2

Similar questions

An unforeseen repetition of jQuery Ajax calls

The slider spills over the edges of the page

interactive textbox created with the combination of javascript and php

Navigate through the contents of a table featuring intricate colspan and rowspan elements, while keeping both headers and left columns in

Creating a live data stream to listen for new additions to the database in PHP/CodeIgniter

Creating a responsive DataTable filled from a $.ajax request is a straightforward process that can greatly

Utilizing SVG within Sproutcore allows for seamless access to DOM nodes and the ability to effortlessly bind Sproutcore events directly to the DOM

What is the best way to create a view that caters to both administrators and regular users?

Guide to setting up django LOGGING with azure-log-analytics

What could be causing the misalignment of these two divs?

To prevent the loss of form data, consider utilizing the input type button instead of the button element

Poor Django and uwsgi performance

When utilizing jQuery and Ajax for form submission, PHP is unable to retrieve any data

Error in the code that I am unable to locate in JavaScript, HTML, and CSS

Mastering the art of customizing jQuery Mobile skins

Django 1.8 fails to load static files

What is the best way to shut down a browser using C#?

ajax.php form connected to a database using php

"Enhance User Experience: Use CSS to highlight text selection based on

Refreshing the view following a model update within an AJAX call in the Backbone framework