按钮使其他div可见

Question

按钮使其他div可见

4

我是一个新手，正在尝试一些html/css。我计划在用户单击“登录”时使登录屏幕弹出并位于中间。

我设置了一个在屏幕上隐藏的div，并希望在用户单击“登录”时将其显示出来。

我遇到的问题是如何再次使该Div可见。以下是CSS：

#loginscreen {
    position: absolute;
    width: 400px;
    height: 500px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 2px solid black;
    border-radius: 40px;
    background-color: lightgrey;
    visibility: hidden;
    z-index: 1000;
}

    .loginbtn:active + #loginscreen
    {
      visibility: visible

    }

- Derik

使用JavaScript的onclick事件监听器。这个很简单。 - Eli Nathan

1

你是否在使用内联JavaScript？我们说“不要这样做”……外部JS才是正确的选择。 - cssyphus

我并不是说，事件监听器可以是内联的或外部的。这取决于个人喜好。当我刚开始学习JS时，使用内联方式有很大帮助，但现在我无法忍受JavaScript使HTML代码看起来混乱的情况。所以我更倾向于使用外部方式！ - Eli Nathan

2个回答

0

如果不使用JavaScript（或更好的是jQuery），则无法捕获用户事件（“click”）。作为初学者，我首先建议您使用jQuery而不是纯JavaScript。一方面，这样打字量少得多，而且（在我看来）更容易掌握。您可以使用jQuery编写代码，而jQuery在运行时将其转换为JavaScript。要使用jQuery，您只需在每个页面的<head>标签中包含jQuery库，如下所示：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

显示登录表单的jQuery代码如下：

$('#mybutt').click(function(){
    $('#loginscreen').fadeIn(800);
});

这是一个可以用来参考的示例：

jsFiddle演示

$('#mybutt').click(function(){
  $('#loginscreen').fadeIn(800);
});
$('#logX').click(function(){
  $('#loginscreen').fadeOut(800);
});

div{position:relative;box-sizing:border-box;}
#loginscreen {
    position: absolute;
    width: 400px;
    height: auto;
    top:0;
    right: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: lightgrey;
    z-index: 1000;
    display:none;
}
#logHead{width:100%;height:40px;padding:5px;background:darkcyan;color:white;overflow:hidden;}
  #headLeft{float:left;width:80%;}
  #headRight{float:right;width:20px;padding:5px;border:1px solid green;cursor:pointer;}
#logTop{width:100%;padding:20px;}
#logUN{width:100%;}
#logPW{width:100%;}
#logBott{width:100%;padding-left:80%;overflow:hidden;}
#loginscreen input{font-size:1.5rem;border:1px solid #ddd;}
button{font-size:1.5rem;color:white;background:darkcyan;cursor:pointer;}
#mybutt{position:absolute;bottom:150px;left:50px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="loginscreen">
    <div id="logHead">
        <div id="headLeft">Login:</div>
        <div id="headRight"><div id="logX">X</div></div>
    </div>
    <div id="logTop">
        <div id="logUN"><input type="text" id="username" placeholder="user"/></div>
        <div id="logPW"><input type="text" id="password" placeholder="pass"/></div>
    </div>
    <div id="logBott">
        <button>Login</button>
    </div>
</div>
<input type="button" id="mybutt" value="Login" />

既然你是jQuery的新手，这里有一些免费的初学者教程可以帮助你入门。（这也是我自己学习的地方，而且它们是免费的）

- cssyphus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- theblindprophet · Accepted Answer

:active 只在元素被点击时有效。一旦点击不再持续，元素将不再处于活动状态。

尝试使用JavaScript来实现这个功能，例如：

<button type="button" onclick="document.getElementById('<id-of-div>').style.visibility = 'visible'"> 登录 </button>

其中<id-of-div>是您分配给要显示的div的任何ID。