0 
<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() 和 show() 做这个？我也可以使用 PHP 和 Ajax

在此处查看 jsfiddle 。

4

3 回答 3

2

最简单的解决方案是：

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

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

（尽管请注意我使用的是fadeIn()andfadeOut()而不是“更突然的” show()and hide()）

JS 小提琴演示。

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

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

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

您遇到的问题是，一旦 jQuery 隐藏了所有受影响的元素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 小提琴演示。

于 2012-07-22T20:15:53.907 回答
1

好吧，我以前遇到过这种情况，并找到了锁定页面的完美解决方案。其实这很简单，您需要做的是使用匿名函数和基本的 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);
于 2012-07-22T20:59:20.907 回答
1

像这样？

<!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 对我来说太慢了>__<

于 2012-07-22T20:10:38.337 回答