Question

我有一个div用于css动画的容器，它出现在整个网站的主页上......一个像窗帘一样打开的文字和背景，揭示了它下面的网站。它就像一个介绍着陆页。问题是我需要它只出现在第一页加载。我不希望它在页面刷新时显示，或者如果有人通过网站导航并返回主页。

有人可以告诉我如何对此进行编码，因为我在网上搜索了很多内容并且没有找到针对我的具体案例的明确解释。

以下是div的代码：

＆＃13;

<div id="landContainer">
<div class="left-half" id="leftP"><article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article></div>
<div class="right-half" id="RightP"><article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article></div>
</div>

＆＃13;

所以我必须在第一页加载时显示的div将是ID为landContainer的div，其中包含几个其他div。

由于我是这类编码的新手，我需要一个完整的代码示例，我需要使用我的div。

对于Ian ...这是我的index.html文件的内容......

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Landing page v2</title>
        <link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
    </head>
    <body>
<div id="landContainer">
  <div class="left-half" id="leftP">
    <article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
  </div>
  <div class="right-half" id="RightP">
    <article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
  </div>
</div>
        <script type="text/javascript" src="scripts/snap.svg-min.js"></script>
        <script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
$( document ).ready(function() {
    var isExists = localStorage.getItem("pageloadcount");
if (isExists != 'undefined') { $("#landContainer").hide();
} 
  localStorage.setItem("pageloadcount", "1");
});
        </script>
    </body>
</html>

＆＃13;

Answer 1

    <!DOCTYPE html>
<html>
    <head>
        <title>Landing page v2</title>
        <link rel="stylesheet" type="text/css" href="landing.css" media="screen" />
<script type="text/javascript" src="scripts/snap.svg-min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>
$( document ).ready(function() {
if (localStorage.getItem("pageloadcount")) { $("#landContainer").hide();
} 
  localStorage.setItem("pageloadcount", "1");
});
        </script>
    </head>
    <body>
<div id="landContainer">
  <div class="left-half" id="leftP">
    <article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
  </div>
  <div class="right-half" id="RightP">
    <article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
  </div>
</div>

    </body>
</html>

Answer 2

  $( document ).ready(function() {
    var isExists = localStorage.getItem("pageloadcount");
if (isExists != 'undefined') { $("#landContainer").hide();
} 
  localStorage.setItem("pageloadcount", "1");
});

<div id="landContainer">
  <div class="left-half" id="leftP">
    <article class="leftPanel"><img id="SloganLeft" src="Decouvrez.svg"></article>
  </div>
  <div class="right-half" id="RightP">
    <article class="rightPanel"><img id="SloganRight" src="Atteignez.svg"></article>
  </div>
</div>

Answer 3

最好的方法是使用会话，通过该会话，您可以确定其是新请求还是旧请求。服务器端会话将是最好的

仅在第一页加载时显示div

3 个答案: