Question

我的页面上有一个UL作为导航。在我的页脚中，我有一些jQuery代码，因此当我单击链接时，它会删除li上的活动类，然后将其放在已单击的当前li上。这可以正常工作，但是当页面重新加载活动类时会返回上一个li。

这是我的代码

 jQuery(document).ready(function () {

        "use strict";

        // Init Demo JS
        Demo.init();


        // Init Theme Core
        Core.init();

        $('.sidebar-menu > li').click(function (e) {
            $(".active").removeClass("active");
            $(this).addClass("active");
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav sidebar-menu">
            <li class="sidebar-label pt20">Menu</li>
            <li class="active">
                <a href="/dashboard">
                    <span class="glyphicon glyphicon-home"></span>
                    <span class="sidebar-title">Dashboard</span>
                </a>
            </li>
            <li>
                <a href="/fixtures">
                    <span class="fa fa-calendar"></span>
                    <span class="sidebar-title">Fixtures</span>
                </a>
            </li>
            <li>
                <a href="/players">
                    <span class="glyphicon glyphicon-book"></span>
                    <span class="sidebar-title">Players</span>
                </a>
            </li>
</ul>

我是否在jQuery中遗漏了一些东西以保持课堂上所需的li？

Answer 1

你的JS正在失去刷新的上下文。

你可以做的是在加载时运行另一个函数来检查你所处的URL，并根据它设置活动状态。像这样：

var setDefaultActive = function() {
    var path = window.location.pathname;

    var element = $(".sidebar-menu a[href='" + path + "']");

    element.addClass("active");
}

setDefaultActive()

Answer 2

我的解决方案基于this link。页面刷新后，我需要导航药才能保持活动状态。您可能可以格式化它以满足您的需求。

$(document).ready(function () {
  // On page load
  $('a[data-toggle="pill"]').on('show.bs.tab', function (e) {
    // Get the id for the pill that was last shown and set it to local storage
    localStorage.setItem('activeLink', $(e.currentTarget).attr('id'));
  });
  // After page loaded
  // Get the id for the pill from local storage
  var activeLink = localStorage.getItem('activeLink');
  // If it's there, click it
  if (activeLink) {
    $(`#${activeLink}`).click();
  }
});

当页面刷新jQuery时，将删除活动类

2 个答案: