0

我正在使用引导程序作为 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>
4

2 回答 2

4

您必须使用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');
  }
});

代码礼貌如何在页面重新加载后使用 twitter 引导程序保持当前选项卡处于活动状态？

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

于 2013-09-10T12:30:43.333 回答
-1

这可以通过 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*/
}

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

例如对于我的比赛页面

<html class="matchPage" >

对于“关于我”页面

<html class="aboutPage" >
于 2013-09-10T12:56:26.697 回答