Welcome

.

Keep color from clicking on button after page redirects

by

Questions › Keep color from clicking on button after page redirects
0
Vote Up
Vote Down
Garmaine asked 4 years ago

When I click on a button, the color of the button changes correctly. However, when you click on a button, it redirects to an app route. How can I make the color from clicking on the button still remain after the page loads?

base.html:

<!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8">
    <head>
        {% block head %}
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
              integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
              crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="{{ url_for('static', filename='js/button_click.js') }}" type="text/javascript"
                charset="UTF-8"></script>

        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/dashboard.css') }}">

        <title>{% block title %}{% endblock %}</title>
        {% endblock %}
    </head>
    <body>
    {% block content %}
    <div class="navbar">
        <div class="logo-holder">
            <img class="logo" src="{{ url_for('static', filename='img/logo.png') }}" alt="Logo">
        </div>
        <div class="button-holder">
            <button class="navbtn" id="orange-btn" onclick="window.location = '/orange';">Orange</button>
        </div>
        <div class="button-holder">
            <button class="navbtn" id="banana-btn" onclick="window.location = '/banana';">Banana</button>
        </div>
        <div class="button-holder">
            <button class="navbtn" id="apple-btn" onclick="window.location = '/apple';">Apple</button>
        </div>

    </div>
    {% endblock %}
    </body>
    </html>

button_click.js:

$('.button-holder').click( function () {
    $(this).toggleClass('active_button');
});

dashboard.css:

.button-holder:active, .active_button {
      background-color: #992200;
}