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

【问题标题】：How to remember the active li item after refresh刷新后如何记住活动的li项
【发布时间】：2013-09-14 03:58:29
【问题描述】：

我将引导程序用作 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>

【问题讨论】：

通过在重定向页面上添加适当的活动类。
通过使用持久存储作为 localStorage/cookie 或将参数发送到请求的页面
DOM Storage guide.
我们需要代码，无法修复我们看不到的东西

标签： jquery css twitter-bootstrap

【解决方案1】：

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

$(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 替换

【讨论】：

谢谢，'a[data-toggle="tab"]' 是什么意思？
我更新了我的代码，请帮助我！我是 boostrap 和 jquery 的新手。
刚查过，复制/粘贴别人回答的时候，你应该引用它：stackoverflow.com/a/10524697/1414562 ...
这在页面确实需要刷新时有效，但是当我需要刷新页面时，它只是激活第一项，我的代码在我的问题中更新，提前致谢。

【解决方案2】：

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

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

注意 <html class="profilePage" > 会根据您所在的页面而变化

例如对于我的比赛页面

<html class="matchPage" >

关于我的页面

<html class="aboutPage" >

【讨论】：

一次，只有一个活动项目。当我点击一个项目时，它会重定向到一个页面（可能不是当前页面），那么 CSS 是如何实现我的目标的呢？
我不完全理解你。但是据我了解，我提供的技术可以实现您的目标。本质上 - 根据您所在的页面将样式应用于特定元素。