点击< a>后，在整个网站上永久显示隐藏的div。 href链接一次 [英] Show hidden div permanently throughout website after clicking on a <a> href link once

问题描述

示例这应该如何工作：

显示隐藏的div会在点击href链接后永久丢弃网站
（小标题）div在开始时隐藏，但是当在父页面上单击一次时（例如（页面1）），即使您输入了新的网页或刷新网站。

 < div class =big-header> 
< ul> 
< li> 
< a href =＃>页面1< / a> 
< / li> 
< li> 
< a href =＃>第2页< / a> 
< / li> 
< li> 
< a href =＃>第3页< / a> 
< / li> 
< / ul> 
< / div> 
< div class =小标题> 
< ul> 
< li> 
< a href =＃>子页面1.1< / a> 
< / li> 
< li> 
< a href =＃>子页面1.2< / a> 
< / li> 
< li> 
< a href =＃>子页面3.3< / a> 
< / li> 
< / ul> 
< / div> 
  

http： //jsfiddle.net/ctL6T/179/

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

解决方案

您可以使用 > Window.localStorage 来存储一个标志，如果菜单已经显示，然后使用这样的脚本

为了回应您的评论，我添加了逻辑，以便如果此脚本包含在多个页面中，则它将独立工作为每个页面。我通过使用 Window.location 来为访问的每个页面分别存储信息。

（ Demo ）

  var hide = localStorage [location]？假：真; 
 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'）; 
} 
} 
  

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/

I can imagine this being done by Jquery. Anything would be a big help. Cheers!

解决方案

You can use Window.localStorage to store a flag if the menu has been shown, then use a script like this to only execute the show function once.

In response to your comment below, I've added logic so that if this script is included on multiple pages then it will work independently for each page. I do this by using Window.location to store the information separately for each page visited.

(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');
    }
}

这篇关于点击< a>后，在整个网站上永久显示隐藏的div。 href链接一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！