简体   繁体   English

如何使用javascript显示/隐藏div

[英]How to show/hide a div with javascript

I'm currently making a registration page for a site and need to show a typical password confirmation message. 我目前正在制作网站的注册页面,并且需要显示典型的密码确认消息。 How would I make a script to hide and show a div? 如何制作隐藏和显示div的脚本?

This is as far as I've got: 据我所知:

<html><head>
<script language="javascript">
function correctpassword()
var password="password"
var confirmpassword="confirmpassword" 
if (password1 != password2)
{
showcss="unconfirmed"
}
else
{
showcss="confirmed"
}
</script>
</head>
<body>
<form>
<u>Personal Details</u>
First Name: <input type="text" id="firstname">
Last Name: <input type="text" id="lastname">
Date of Birth:
Gender: Male Female
<u>Login Details</u>
Email Adress:<input type="text" id="email">
Username:<input type="text" id="username">
<!--check avalibility-->
Password:<input type="text" id="password">
Confirm Password:<input type="text" id="confirmpassword">
<!--Javascript if "password" doesnt equal "confirm password" showcss passwords don't match-->
<button type="button" onclick="correctpassword()">Display Date</button>
</form>
</body>
</html>

PS:The variables may be wrong. PS:变量可能是错误的。

Assuming you are talking about hiding / showing a div , span or other similar element in HTML, you can use the jQuery JavaScript framework . 假设您正在谈论隐藏/显示HTML中的divspan或其他类似元素,则可以使用jQuery JavaScript框架 For example: 例如:

$('#element_to_show').show();
$('#element_to_hide').hide();

You can trigger the hide / show via events, eg key press or user leaving the input element, in jQuery as well. 您也可以在jQuery中通过事件触发隐藏/显示,例如按键或用户离开输入元素。

Control your styles and appearance with className property that applied to class markup attribute. 使用应用于类标记属性的className属性控制样式和外观。 Try to avoid .style property of the elements and add/remove some classes instead. 尽量避免使用元素的.style属性,而是添加/删除一些类。 It will give you more control and simplify maintenance in the future. 它将为您提供更多控制,并在将来简化维护。

in css: 在CSS中:

.show{
  display:block;
}

.box{
  display:none;
}

in html: 在html中:

<div id="passConfirm"></div>
<div id="box"></div>

in your script: 在您的脚本中:

var confirmEl,
    confirmBox;
confirmEl = document.getElementById('passConfirm');
confirmBox = document.getElementById('box');
confirmEl.addEventListener('click', showBox, false);

function showBox () {
  confirmBox.className += ' show';
}

As mentioned, you can use some libraries that helps to work with DOM or write your own functions helping to add and remove some classes, check for hasClass method etc. 如前所述,您可以使用一些有助于使用DOM的库,或者编写自己的函数来帮助添加和删除某些类,检查hasClass方法等。

I'm on my phone, hence the short answer. 我在打电话,所以答案很短。 Easiest way is to get the id of the element like document.getElementById and place that into a variable. 最简单的方法是获取诸如document.getElementById之类的元素的ID,并将其放入变量中。 Then use the style property like 然后像这样使用style属性

Obj.style.display = "none";

To hide it. 隐藏它。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM