2013-05-03 60 views
10

我想每個用戶或會話只顯示一次歡迎div。我知道有Jquery選項。既然我是jquery的新手,我一直無法自己解決它。請幫助每個用戶/瀏覽器會話僅顯示歡迎div

$(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>

我想只有一次顯示此歡迎頁面,直到用戶關閉瀏覽器.. 等待有價值的幫助

+0

如果您已經有登錄系統將該信息附加到登錄會話cookie,否則請僅使用mkhatib answer和cookie。另外請記住,服務器端http只有cookie更安全。 – 2013-05-03 08:28:52

回答

29

設置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

+0

嗨mkhatib,感謝您的更快的響應..我複製了腳本,並給予您指出的jquery.cookie.js的引用。然而,這同樣是行不通的。我有沒有想念什麼..建議 – Gops 2013-05-03 08:34:38

+0

我只注意到我的代碼缺少'ready'函數的右括號。可能是這樣。如果沒有,你可以檢查控制檯,如果你有任何JavaScript錯誤? – mkhatib 2013-05-03 17:59:19

+0

這是控制檯顯示的錯誤 未捕獲的TypeError:對象函數(a,b){返回新的e.fn.init(a,b,h)}沒有方法'cookie' – Gops 2013-05-03 18:16:00

1

這是更好,因爲我們將不會看到飛隱藏時閃爍

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

jQuery的

$(document).ready(function() { 
    if ($.cookie('noShowEducation')) ; 
    else { 
     $('.edu').show(); 
     $("#close-edu").click(function() { 
      $(".edu").fadeOut(1000); 
      $.cookie('noShowEducation');  
     }); 

    } 
}); 
3

如果您的客戶端不吃餅乾

您可以使用sessionStorage,畢竟這是他們準確的意思,在整個會議期間保留一組數據。

爲了獲得最佳用戶體驗,您應該從現有CSS中的 [wellcomeElement] .style.display =「none」屬性開始。

因此,整個過程會變得簡單...

  1. 檢查,如果歡迎消息已被證實
  2. 展! 不採取行動!

完成。

例如代碼:

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

代碼剪斷可放,(但是多於優選地)在腳本標籤的歡迎信息元素之後。

然而,對於完全向後兼容,你可以隨時退回到使用會話名稱屬性爲:

/message/.test(name) ? 0 : 
[wellcomeElement].style.display = "block", 
name = 'message'; 

問候。