Question

我从其他问题中找到了这个小提琴，它很好用。问题是刷新时删除按钮时添加的类（.active）。即使我重新加载它，我怎么能保持它。

HTML

<div class="flr-wrap">
<ul>
    <li><a class="button active" data-rel="#content-a" href="#">a button</a></li>
    <li><a class="button" data-rel="#content-b" href="#">b button</a></li>
</ul>

<div class="flr-inner">
    <div class="container" id="content-a">
        AAA
    </div>
    <div class="container" id="content-b">
        BBB
    </div>
</div>

JS

    // set content on click
$('.button').click(function(e) {
    e.preventDefault();
    setContent($(this));
});

// set content on load
$('.button.active').length && setContent($('.button.active'));

function setContent($el) {
    $('.button').removeClass('active');
    $('.container').hide();

    $el.addClass('active');
    $($el.data('rel')).show();
}

提前致谢..

Answer 1

您需要将活动状态存储在服务器中（如果有办法）或在客户端存储（您可以使用Web存储）

将其存储在客户端

// set content on click
$('.button').click(function(e) {
  e.preventDefault();
  setContent($(this));
  localStorage.setItem('active-container', $(this).data('rel'));
});

// set content on load
localStorage.getItem('active-container') && setContent($('.button[data-rel="' + localStorage.getItem('active-container') + '"]'));

function setContent($el) {
  $('.button').removeClass('active');
  $('.container').hide();

  $el.addClass('active');
  $($el.data('rel')).show();
}

Answer 2

在 Arun 的回答中添加了更多细节。

点击后将菜单项存储在本地存储中。

$('.menu-item').click(function (e) {
    localStorage.setItem('active-menu-item', $(this).attr('href'));
});

通过添加类“活动”来设置活动菜单项样式，然后单击该项目以转到活动页面。它位于 $(document).ready() 内，以便在刷新后运行。

$(document).ready(function () {
    const activeMenuItem = $('.menu-item[href="' + localStorage.getItem('active-menu-item') + '"]').first();
    activeMenuItem && setActiveLink(activeMenuItem);
});

function setActiveLink($el) {
    $el.addClass('active');
    $el.click();
}

刷新后继续添加课程

2 个答案: