Django js tabs сохраняет выбранную вкладку при обновлении страницы

Я работаю с js вкладками в Django, и они отлично работают, но я хотел бы сохранить выбранную вкладку активной в этот момент при обновлении страницы. Я нашел этот пример, но он не работает https://www.tutorialrepublic.com/faq/how-to-keep-the-current-tab-active-on-page-reload-in-bootstrap.php

Вот скрипт, который я использую:

    {% extends "bioinfointerface/base.html" %}

{% load static %}

{% block content %}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Keep Selected Bootstrap Tab Active on Page Refresh</title>
<script>
$(document).ready(function(){
    $('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    });
    var activeTab = localStorage.getItem('activeTab');
    if(activeTab){
        $('#myTab a[href="' + activeTab + '"]').tab('show');
    }
});
</script>
</head>
<body>
    <div class="m-3">
        <ul class="nav nav-tabs" id="myTab">
            <li class="nav-item">
                <a href="#sectionA" class="nav-link active" data-toggle="tab">Section A</a>
            </li>
            <li class="nav-item">
                <a href="#sectionB" class="nav-link" data-toggle="tab">Section B</a>
            </li>
            <li class="nav-item">
                <a href="#sectionC" class="nav-link" data-toggle="tab">Section C</a>
            </li>
        </ul>
        <div class="tab-content">
            <div id="sectionA" class="tab-pane fade show active">
                <h3>Section A</h3>
                <p>Vestibulum nec erat eu nulla rhoncus fringilla...</p>
              </div>
            <div id="sectionB" class="tab-pane fade">
                <h3>Section B</h3>
                <p>Vestibulum nec erat eu nulla rhoncus fringilla...</p>
            </div>
            <div id="sectionC" class="tab-pane fade">
                <h3>Section C</h3>
                <p>Nullam hendrerit justo non leo aliquet...</p>
            </div>
        </div>
    </div>    
</body>
</html>

{% endblock %}

В файле base.html я загружаю:

    <!-- Bootstrap core JS-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Core theme JS-->
    <script src="{% static 'bioinfointerface/js/scripts.js' %}"></script>
    
    <link rel="stylesheet" type="text/css" href="{% static 'bioinfointerface/css/bootstrap.min.css' %}"  />
    <script src="{% static 'bioinfointerface/js/jquery.js' %}"></script>
    <script src="{% static 'bioinfointerface/js/bootstrap.min.js' %}"></script>
Вернуться на верх