存储标签

时间:2015-10-22 02:48:19

标签: javascript html css html5 css3

我的网站中有以下代码行 - http://codepen.io/anon/pen/rOJNoe

<div class="nav-wrapper">
  <ul class="nav nav-pills nav-justified">
    <li class="active"><a href="#EXOBusinessModules" data-toggle="pill">Tab 1</a></li>
    <li><a href="#EXOEmployerServiceModules" data-toggle="pill">Tab 2</a></li>
  </ul>
</div>

<div class="tab-content">
  <div class="tab-pane fade in active" id="EXOBusinessModules">

    <div class="proof-points-3">
      <span id="EXOBusinessModules" class="anchor anchor-sticky"></span>

      <div class="proof-point">
        <span id="EXOOn-The-Go" class="anchor anchor-sticky"></span>
        <a href="#">
          <h4>Lorem ipsum dolor sit amet</h4>
        </a>
      </div>

      <div class="proof-point">
        <span id="EXOAdd-ons" class="anchor anchor-sticky"></span>
        <a href="#">
          <h4>Consectetur adipiscing elit</h4>
        </a>
      </div>
    </div>
  </div>

  <div class="tab-pane fade" id="EXOEmployerServiceModules">

    <div class="proof-points-3">
      <span id="EXOEmployerServiceModules" class="anchor anchor-sticky"></span>

      <div class="proof-point">
        <span id="EXOPayroll" class="anchor anchor-sticky"></span>
        <a href="#">
          <h4>Curabitur dapibus mi tellus</h4>
        </a>
      </div>

      <div class="proof-point">
        <span id="EXOEmployeeInformation" class="anchor anchor-sticky"></span>
        <a href="#">      
          <h4>cursus et interdum sit amet</h4>
        </a>
      </div>
    </div>
  </div>
</div>

如何制作它,以便当用户选择一个标签,例如“标签2”然后刷新其浏览器(或转到另一个页面并返回此处)时,它会存储它们之前所在的标签? / p>

3 个答案:

答案 0 :(得分:1)

最简单的方法是使用HTML5本地存储。你可以用JS做到这一点:

// Check if tab is set. If it is, keep it. If not, set default tab to tab1
if(localStorage.tab == undefined)
    localStorage.tab = 1;

// Use whatever code you have to go to that tab (I don't know what you have...)
goToTab(localStorage.tab);

如果您愿意,您也可以使用JS或PHP cookie,但我认为这种方法不那么麻烦且更容易。

答案 1 :(得分:1)

  

你可以看到这个demo,这将有所帮助 - 迈克罗斯

答案 2 :(得分:0)

您希望利用cookies来保存少量此类数据。

如果您希望保存的不仅仅是一些信息,那么您需要查看html5 local storage