刷新頁面時隱藏div
[英]hide div when refresh page
問題描述
我有這個<div> ，其中我有一個“X”，它關閉了<div>但在刷新頁面時再次顯示。 即使在刷新頁面后，我也希望<div>保持隱藏狀態。 我怎樣才能做到這一點？
我也想在頁面刷新時隱藏它們。
<div class="cookie">
<a href="#" class="cookie-close">
<span class="icon" onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'>X</span>
</a>
</div>
6 個解決方案
解決方案1
1 2017-01-17 18:05:09
當用戶單擊 x 時，考慮將選項存儲到 localStorage 中。
localStorage.setItem('showDiv', false)
希望這有幫助..干杯
請考慮以下代碼：
<body onload="onLoad()">
<div id="myDiv" class="cookie" style="display: none">
<a href="#" class="cookie-close">
<span class="icon" onclick='onClose()'>X</span>
</a>
</div>
<script>
function onLoad() {
var showDiv;
if(localStorage.getItem("showDiv") == null) {
showDiv = true;
}
else {
showDiv = localStorage.getItem("showDiv")
}
if (showDiv) {
document.getElementById('myDiv').style.display = 'block';
}
else {
document.getElementById('myDiv').remove();
}
}
function onClose() {
document.getElementById('myDiv').remove();
localStorage.setItem("showDiv", false);
}
</script>
</body>
解決方案2
0 2017-01-17 18:04:40
如果您希望在每次加載頁面時隱藏 div，只需按照@FunkDoc 的說明進行操作並添加display:none; 到你的CSS。 如果您希望它僅在您第一次加載頁面時打開，您必須在本地保存詳細信息：
// Retrieve
if(localStorage.getItem("visited") == null){
document.getElementsByClassName('cookie')[0].style.display = 'none';
}
// Store
localStorage.setItem("visited", "true");
JS小提琴： https : //jsfiddle.net/mb06490w/1/
解決方案3
0 2017-01-17 18:07:19
你可以制作一個看起來像這樣的腳本：
<div id="cookie_message" class="cookie" style="display: none;">
<a href="#" class="cookie-close">
<span class="icon" onclick="document.getElementById('cookie_message').style.display = 'none'; document.cookie = 'hideCookieMessage=true'; return false;">X</span>
</a>
</div>
<script>
// checks if the cookie is NOT present, if not, then it shows the cookie message
if (!document.cookie.match(/^(.*;)?hideCookieMessage=[^;]+(.*)?$/)) {
document.getElementById('cookie_message').style.display = 'block';
}
</script>
它現在僅在未設置 cookie hideCookieMessage 時顯示。 一定要在后端檢查 cookie，如果 cookie 存在，甚至不要發送它。
解決方案4
0 已采納 2017-01-17 18:11:28
添加 cookie 有一些與CREATE 、 READ和REMOVE cookie 相關的功能，請找到這個fiddle或下面的代碼片段以獲取更多信息。
我希望它會幫助你..
function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime() + (days*24*60*60*1000)); var expires = "; expires=" + date.toUTCString(); } else var expires = ""; document.cookie = name + "=" + value + expires + "; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } function eraseCookie(name) { createCookie(name,"",-1); } $(function(){ if(readCookie('CodefireOnce') == null) { $(".cookie").css("display","block"); } $("body").on("click",".icon",function(){ $(this).closest("div.cookie").remove(); createCookie('CodefireOnce','true',7); }); });
<div class="cookie" style="display:none;"> <a href="#" class="cookie-close"> <span class="icon">X</span> </a> </div>
解決方案5
0 2017-01-17 18:12:33
正如 Jersh 和 Adrian Bratu 所說，您可以使用localstorage來存儲 div 的狀態（隱藏與否）。
但是，我建議改用cookie。
cookie 允許您設置本地存儲永久有效的到期日期。 如果出於某種原因，您在 div 中進行了希望用戶最終看到的更改，則使用 localstorage，您將必須清理它。
這意味着，要么將新數據（例如帶有日期）添加到您的存儲中。
使用 cookie，當過期日期到期時，div 將自動再次顯示，您只需要在過期時設置一個具有新過期日期的新 cookie。
實現非常相似：
document.cookie = "hidden=true; expires=Fri, 20 Jan 2017 23:59:59 GMT"
希望這對你有幫助。
解決方案6
0 2017-01-17 18:22:33
讓它實際顯示本地存儲在此處或在 jsfiddle 中執行您想要的操作是不確定的。 發生的情況是，如果單擊 X，則會隱藏面板並在 localStorage 上保存一個變量。 然后，當頁面加載時，您檢查該變量是否存在。 我還添加了一個“顯示”按鈕，以便您可以切換窗格。 我在這里設置了一個測試頁面https://snowmonkey.000webhostapp.com/cookieThing.html
$(document).ready(function(){ console.log("I've got "+localStorage.getItem("panelHidden")); if(localStorage.getItem("panelHidden") == "true" ){ $(".panel").hide(); } else { $(".panel-show-control").hide(); }; $(".panel-close-control").on("click", function(){ // First, close the panel.. $(".panel").hide(); $(".panel-show-control").show(); // then, set a cookie. localStorage.setItem("panelHidden", "true"); }); $(".panel-show-control").on("click", function(){ // hide the button... $(this).hide(); $(".panel").show(); // then, unset the cookie! localStorage.setItem("panelHidden", "false"); }); });
.panel-close-control { border: 1px solid black; background-color: #ccc; font-family: Arial, sans-serif; font-size: 9px; float: right; } .panel { border: 1px dotted red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="panel"> <span class="icon panel-close-control">X</span> <div class="pane-contents"> <p>A designer can use default text to simulate what text would look like. Humans are creative beings. However, standard default text can do the trick. Your design looks awesome by the way. I hope you enjoyed the fake text. It looks even better with you using this text. Using default text is a simple way to create the appearance of content without having to create it. If it is not real text, they will focus on the design. This text will not appear in a consistent order. However, standard default text can do the trick.</p> </div> </div> <button class="panel-show-control"> Show the panel </button>
如何隱藏Div標簽而不刷新頁面
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.