Question

我正在使用bootstrap作为Web UI。当我点击一个li项目时，它会重定向到新的网页，活动项目将再次成为第一个项目，我该如何解决这个问题呢？

    <ul id="profileTabs" class="nav nav-list">
        <li class="active"><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">Profile</a></li>
        <li><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">About Me</a></li>
        <li><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">My Match</a></li>
    </ul>

Answer 1

您必须使用 localstorage 或 Cookie 来管理它。

$(function() { 
  //for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
  $('a[data-toggle="tab"]').on('shown', function (e) {
    //save the latest tab; use cookies if you like 'em better:
    localStorage.setItem('lastTab', $(e.target).attr('id'));
  });

  //go to the latest tab, if it exists:
  var lastTab = localStorage.getItem('lastTab');
  if (lastTab) {
      $('#'+lastTab).tab('show');
  }
});

代码礼貌How do I keep the current tab active with twitter bootstrap after a page reload?

在上面的代码中使用了标签但尝试替换为您期望的li's

Answer 2

这可以通过css来实现。您需要将类应用于页面上的html标记，并将各个类应用于每个li项目。

e.g。 HTML （适用于个人资料页面）

<html class="profilePage" >
...
    <ul id="profileTabs" class="nav nav-list">
        <li class="profileMenuItem"><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">Profile</a></li>
        <li class="aboutMenuItem"><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">About Me</a></li>
        <li class="matchMenuItem"><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">My Match</a></li>
    </ul>
...
</html>

<强> CSS

.profilePage .profileMenuItem,
.aboutPage .aboutMenuItem,
.matchPage .matchMenuItem {
    /*active styles here*/
}

<强> N.b。 <html class="profilePage" >会根据您所在的页面而改变

E.g。对于“我的匹配”页面

<html class="matchPage" >

关于我的页面

<html class="aboutPage" >

刷新后如何记住活动的li项目

2 个答案: