Question

<body>
    <span id="lock">lock</span>
    <div id="one">test test</div>
    <div id="three" style="display: none">hide</div>
    <span id="two">test</span>
    <div id="div_lock">
        Enter password: <input type="password"> <input type="button" value="unlock" id="unlock">
    </div>
</body>

$('#lock').click(function(){
  $('#div_lock').show();
    //????
})

$('#unlock').click(function(){
  $('#div_lock').hide();
//????
})

如果我点击LOCK然后我想打开div_lock并隐藏页面中的所有其他元素。如果我点击解锁，则隐藏div_lock并显示之前的元素。

我可以使用除.hide以外的其他功能吗？如果我使用hide，则可以检查SOURCE代码。也许任何变量有SIMPLE哈希等？如果不是，我怎么能用.hide（）和show（）来做这个？我也可以使用PHP和Ajax

查看jsfiddle here。

Answer 1

最简单的解决方案是：

$('#lock').click(function() {
    $(this).siblings().andSelf().fadeOut();
    $('#div_lock').fadeIn();
})

$('#unlock').click(function() {
    $('#div_lock').fadeOut();
    $(this).closest('div').siblings().fadeIn();
})

（虽然请注意我使用的是fadeIn()和fadeOut()，而不是“更突然的”show()和hide()）

JS Fiddle demo

还值得记住的是，如果有人可以访问您的浏览器（假设这是某种安全功能），他们仍然可以通过JavaScript控制台覆盖它，或者只是刷新页面（假设没有登录）。 / p>

更新以回应OP留下的评论（下文）：

这没关系，但如果我点击解锁，那么这也会向我显示<div id="three" style="display: none">hide</div> - 这应该是我display:none

你遇到的问题是，一旦jQuery隐藏了它们， all 受影响的元素都是style="display: none;"（毕竟它是如何工作的）;所以我建议采用更整洁的方法，将内容和控件划分为类似以下内容：

<div id="controls">
    <button id="lock">Lock screen</button>
    <input type="password" />
    <button id="unlock">Unlock screen</button>
</div>
<div id="content">
    <!-- all content goes in here -->
</div>

它适用于以下jQuery（它存储隐藏/显示的节点，然后根据需要恢复它们）：

var content = $('#content'),
    contents;
$('#controls').children().slice(1).hide();
$('#lock').click(function() {
    contents = content.html();
    content.empty();
    $(this).hide().siblings().show();
});

$('#unlock').click(function() {
    content.html(contents);
    $(this).closest('div').children().hide().first().show();
});

JS Fiddle demo

Answer 2

喜欢这个吗？

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<style type="text/css">

    .lock_page_div {
        position: absolute;
        top:0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 100%;
        display: none;
        background: #ffebcd;
    }
</style>

<a href="javascript:" class="lock_page_a">block page</a>

<div class="lock_page_div">
    <a class="unlock_page_a" href="javascript:">unlock_page_a</a>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.lock_page_a').click(function(){
            $('.lock_page_div').show();
            console.log('lock');
        })

        $('.unlock_page_a').click(function(){
            $('.lock_page_div').hide();
            console.log('unlock');
        })
    })
</script>
</body>
</html>

很抱歉，现在jsfiddle对我这么慢＆gt; __＆lt;

Answer 3

好吧，我之前一直处于这种状况，并找到了锁定页面的完美解决方案。实际上这很简单，你需要做的是使用匿名函数和基本的jQuery绑定，更重要的是通过javascript动态加载你的可锁定html数据，所以使用View Source模式不会工作... 这是解决方案：

(function($){ //this way nobody can access you variables inside
    var PAGE_CONTENT = "";
    var IS_LOCK_MODE = false;

    var $lockButton = $('#your_lock_button');
    $lockButton.bind('click', function(){
        if(!IS_LOCK_MODE){
            PAGE_CONTENT = $('#your_content_container').html();
            $('#your_content_container').empty();
            IS_LOCK_MODE = true;
        } else {
            $('#your_content_container').html(PAGE_CONTENT);
            PAGE_CONTENT = "";
            IS_LOCK_MODE = false;
        }
    });
})(jQuery);

使用jQuery锁定和解锁页面？

3 个答案: