页面刷新后如何保持div隐藏?

时间:2012-08-21 20:49:45

标签: javascript jquery wordpress

我有一个简单的节目并隐藏div。

div会在加载页面时自动加载,然后您可以通过单击关闭来关闭div。

刷新页面后,div会再次出现,如何在关闭后对其进行编码,而不是再打开一个月。

提前致谢。

这是我到目前为止的代码;

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://innosite.s3.amazonaws.com/cookie/jquery.cookie.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('#slickbox').show();
 // shows the slickbox on clicking the noted link  
  $('#slick-show').click(function() {
    $('#slickbox').show('slow');
    return false;
  });
 // hides the slickbox on clicking the noted link  
  $('#slick-hide').click(function() {
    $('#slickbox').hide('fast');
    return false;
  });

 // toggles the slickbox on clicking the noted link  
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(400);
    return false;
  });
});

</script>
<script type="text/javascript">
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    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;
}


//user closes your box
createCookie('mybox',1,30);

//check if the box should be hidden
if (readCookie('mybox')) 
    $('#slickbox').hide();
</script>

3 个答案:

答案 0 :(得分:1)

您可以随时使用本地存储空间:

$(function() {

    if (localStorage) { //if local storage
        if (!localStorage.getItem('visited')) { // if not site is visited before
            $('#slickbox').show(); //show element
        }
    } else { //if not local storage use cookies or just show element in old browsers
        $('#slickbox').show();
    }

    // shows the slickbox on clicking the noted link  
    $('#slick-show').click(function() {
        $('#slickbox').show('slow');
        return false;
    });
    // hides the slickbox on clicking the noted link  
    $('#slick-hide').click(function() {
        $('#slickbox').hide('fast');
        localStorage.setItem('visited', true); //set flag, site now visited and element hidden
        return false;
    });

    // toggles the slickbox on clicking the noted link  
    $('#slick-toggle').click(function() {
        $('#slickbox').toggle(400);
        return false;
    });
});​

答案 1 :(得分:0)

这是一个参考。使用那些微小的代码,可能更容易重新开始。

http://www.w3schools.com/js/js_cookies.asp

答案 2 :(得分:0)

有一条评论“使用一个cookie”然后它就消失了,即使它完全适合这个法案:你可以在客户端设置和阅读它。只需在服务器上忽略它。甚至还有一个jQuery插件。