Question

我已经添加了一个固定的导航链接到我在论坛和博客中包含的网站。

当用户尝试浏览论坛时，导航链接可能会让用户感到恼火，因此如果他们点击链接我可以添加功能＆＃34;隐藏导航＆＃34;它会隐藏导航栏，即使他们刷新页面，它仍然会被隐藏，直到他们点击＆＃34;显示导航＆＃34;链路

这是我快速写的内容，但它不起作用，我不知道如何添加此功能

<html>
<!-- Some html -->

<body>
  <a href='#' id='hide'> Hide Navigation </a>

  <text id='data'><br>Data Here</text>

  <a href='#' id='show' style='display:none;'> Show Navigation</a>
</body>

<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>

<script>
$( document ).ready(function() { 

    $("#hide").click(function(){

        $('#data').hide();
        $('#hide').hide();
        $('#show').show();

        return false;
    });

    $("#show").click(function(){

        $('#show').hide();
        $('#hide').show();
        $('#data').show();

        return false;
    });    

});

</script>

</html>

Answer 1

使用 HTML5本地存储来完成以下任务：

    <html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    <body>
        <a href='#' id='navigation'></a>
        <div id='data'><br>Data Here</div>
        <script>
            var navStatus = localStorage.getItem('navStatus');
            $(document).ready(function () {
                if (navStatus == undefined || navStatus == "") {
                    localStorage.setItem('navStatus', 'SHOW');
                    $('#navigation').text('HIDE');
                }
                else {
                    $('#navigation').text(navStatus);
                    if (navStatus == 'SHOW') {
                        $('#data').hide();
                    }
                }
                $("#navigation").click(function () {
                    if ($('#data').is(":visible")) {
                        navStatus = 'SHOW';
                    }
                    else {
                        navStatus = 'HIDE';
                    }
                    $(this).text(navStatus);
                    localStorage.setItem('navStatus', navStatus);
                    $('#data').toggle();
                    return false;
                });
            });
        </script>
    </body>
    </html>

隐藏/显示站点上的导航链接

1 个答案: