Question

当我单击按钮时，按钮的颜色会正确更改。但是，当您单击按钮时，它将重定向到应用程序路由。页面加载后如何通过单击按钮使颜色仍然保留？

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;
}

Answer 1

您可以向localStorage添加一个值，然后在新页面上对其进行检查并再次分配给该按钮。另外请注意，localstorage仅为设备保存了单击的按钮值，而不是全局保存的。此外，如果要使用链接，请更改为锚标记。尝试这样：

HTML：

$(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;
    });



})

JS：

test = ['BTCUSDT', 'ETHBTC', 'ATXETH', 'BATETH']
tickers = []
for x in test:
    info = client.get_symbol_info(x)
    if info is None: continue
    a = info['isMarginTradingAllowed']
    if a:
        tickers.append(x)

Answer 2

由于您位于新页面上，因此需要确定您所在的页面并激活相应的按钮。

    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 */
    }

页面重定向后，防止颜色单击按钮

2 个答案: