Вкладки Django не становятся активными

Когда пользователь входит в систему, он может выбирать различные вкладки для отображения. Текущая проблема заключается в том, что ни одна из других вкладок не выбрана, кроме текущей активной вкладки. Также у 'home' нет url, поэтому в настоящее время она привязана к ''.

Как мне открыть каждую вкладку?

{% block content %}

<div class="col-3">
    <h1>Hi {{ user.username }}!</h1>

    <img class="profile-pic" src="{{user.avatar.url}}" style='object-fit: cover; border-radius:50%;'>
    {% include 'form.html' %}
    <div class="nav flex-column nav-tab" id="nav-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="nav-home" aria-selected="true">Dashboard</a>
      <a class="nav-link" id="nav-messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="nav-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="nav-documents-tab" data-toggle="tab" href="#documents" role="tab" aria-controls="nav-documents" aria-selected="false">Documents</a>  
      <a class="nav-link" id="nav-logout-tab" data-toggle="tab" href="{% url 'logout' %}" role="tab" aria-controls="nav-logout" aria-selected="false">Log out</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home</div>
      <div class="tab-pane fade" id="nav-messages" role="tabpanel" aria-labelledby="nav-messages-tab">Messages</div>
      <div class="tab-pane fade" id="nav-documents" role="tabpanel" aria-labelledby="nav-documents-tab">Documents</div>
      
    </div>
  </div>

{% endblock %} 
Вернуться на верх