Question

Show hidden div permanently throw out website after clicking on a href link once

An example how this should work: The (little-header) div is hidden in the start, but when clicking once on the parent page e.g.(page 1) the (little-header) gets visible throughout the website even though you enter a new page or refresh the site.

 <div class="big-header">
  <ul>
    <li>
      <a href="#">Page 1</a>
    </li>
    <li>
      <a href="#">Page 2</a>
    </li>
    <li>
      <a href="#">Page 3</a>
    </li>
  </ul>
</div>
<div class="little-header">
   <ul>
    <li>
      <a href="#">Sub Page 1.1</a>
    </li>
    <li>
      <a href="#">Sub Page 1.2</a>
    </li>
    <li>
      <a href="#">Sub Page 3.3</a>
    </li>
  </ul>
</div>

http://jsfiddle.net/ctL6T/179/

后，在整个网站上永久显示隐藏的div

我可以想象这是由Jquery完成的。任何事都会有很大的帮助。干杯！

Answer 1

如果菜单已经显示，您可以使用Window.localStorage存储标记，然后使用这样的脚本只执行一次show函数。

在回复下面的评论时，我添加了逻辑，以便如果此脚本包含在多个页面上，那么它将针对每个页面独立工作。我这样做是通过使用Window.location为每个访问过的页面单独存储信息。

（Demo）

var hide = localStorage[location] ? false : true;
var hidden = document.querySelector('.little-header');
if(hide) {
    hidden.style.display = 'none';
    document.onclick = function() {
        localStorage[location] = true;
        hidden.style.display = '';
        document.onclick = '';
        console.log('click');
    }
}

Answer 2

正如@Barmar和@Tiny Giant所说，localStorage运行良好且易于使用。这是一个jQuery版本。

$(function () {
    var showLittleHeader = localStorage.getItem('show_little_header');
    if (showLittleHeader) {
        $('.little-header').show();
    }
    $('.big-header').on('click', 'a', function () {
        localStorage.setItem('show_little_header', 1);
        $('.little-header').show();
    });
});

小提琴：http://jsfiddle.net/wqpjfvy7/

点击<a> href link once

2 个答案: