每个用户/浏览器会话仅显示一次欢迎div

时间:2013-05-03 08:10:53

标签: jquery session html hide

我想每个用户或会话只显示一次欢迎div。我知道有Jquery选项。由于我是jquery的新手,我自己无法解决它。请帮忙

$(document).ready(function() {
  $("#close-welcome").click(function() {
    $(".welcome").fadeOut(1000);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="welcome">
  <div>
    <h1>Hello..!<br> Welcome to ABC
    <br>
    </h1>
    <h2>We wish you a Great Day..!</h2>
    <br>

    <h2><a id="close-welcome" href="#">Thank you.. and please take me to the     website</a> </h2>
  </div>
</div>

我想只显示一次此欢迎页面,直到用户关闭浏览器为止。 等待有价值的帮助

3 个答案:

答案 0 :(得分:30)

设置一个cookie。

$(document).ready(function() {
    if ($.cookie('noShowWelcome')) $('.welcome').hide();
    else {
        $("#close-welcome").click(function() {
            $(".welcome").fadeOut(1000);
            $.cookie('noShowWelcome', true);    
        });
    }
});

您需要包含jQuery.cookie javascript文件。

https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js

答案 1 :(得分:4)

如果您的客户不吃饼干

您可以使用 sessionStorage ,在完全符合它们的目的之后,在整个会话期间保留一组数据。

为了获得最佳用户体验,您应该从first开始 [wellcomeElement] .style.display =&#34; none&#34;现有CSS中的属性。

因此,整个过程将变得如此简单......

  1. 检查是否已显示欢迎讯息
  2. 显示! 不采取行动!
  3. 完成。

    示例代码:

    optimx

    可以在欢迎消息元素之后的脚本标记中放置代码片段(但不仅限于此)。

    但是,为了完全向后兼容,您可以随时回退使用 会话名称 属性,如下所示:

      "message" in sessionStorage ? 0 :
      [wellcomeElement].style.display = "block",
      sessionStorage.setItem("message",true);
    

    问候。

答案 2 :(得分:1)

这样更好,因为我们在飞行中隐藏时不会看到闪烁

Cmd + J

jquery的

<a href="" id="close-edu" class="waves-effect"><span class="edu" style="display: none;">New</span></a>