Cuando hago clic en un botón, el color del botón cambia correctamente. Sin embargo, cuando hace clic en un botón, redirige a una ruta de aplicación. ¿Cómo puedo hacer que el color haciendo clic en el botón aún permanezca después de que se cargue la página?

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;
}
0
dfahsjdahfsudaf 11 abr. 2020 a las 01:44

2 respuestas

La mejor respuesta

Puede agregar un valor al localStorage y luego, en una nueva página, verificarlo y asignarlo nuevamente al botón. También tenga en cuenta que localstorage guardó el valor de su botón presionado solo para su dispositivo, no a nivel mundial. Además, cambie a la etiqueta de anclaje si desea usar enlaces. Intenta así:

Html:

<div class="button-holder">
            <a href="/orange" class="navbtn" id="orange-btn">Orange</a>
        </div>
        <div class="button-holder">
            <a href="/banana" class="navbtn" id="banana-btn">Banana</a>
        </div>
        <div class="button-holder">
            <a href="/apple" class="navbtn" id="apple-btn" >Apple</a>
        </div>

Js:

$(function(){

    var button_index = localStorage.getItem('button_index');
    if(button_index ){
        $('.button-holder').eq(button_index).addClass('active_button');
    }


    $('.button-holder').click( function (e) {
        e.preventDefault();

        var url = window.location   + $(this).find("a").attr('href');
        var button_index = $(this).index();
        $(this).toggleClass('active_button');
        localStorage.setItem('button_index', button_index - 1 );
        window.location = url;
    });



})
1
Elman Huseynov 10 abr. 2020 a las 23:27

Como estás en una página nueva, debes identificar en qué página estás y activar el botón apropiado.

    window.onOpen = function () {
        const thisURL = window.location;
        if (thisURL.includes('/orange') {
            document.getElementById('orange-btn').classList.add('active-class');
        }
        /* and so forth for the other buttons */
    }
0
terrymorse 10 abr. 2020 a las 22:56