怎么用js显示隐藏div
怎么用js来显示或隐藏一个div？很简单，下面一起来看一下。
01
首先我们创建一个div，和一个按钮。用按钮的点击来控制div的显示或隐藏。
02
添加一个样式名叫hide的样式，主要是设置display=none，即隐藏。
03
接着用js来实现显示，隐藏的功能。我们用Jquery的hasClass方法来判断div是否有hide样式，有则删除这个样式，即显示div。如果没有，则添加一个hide的样式，即隐藏div。
04
运行页面，我们点击按钮，如果div是正在显示的，点击后就会隐藏，如果是隐藏状态的，点击后就会显示。
我想要点击一个DIV之外的任何地方，都能隐藏这个DIV要怎么弄？
1、首先输入代码：
!DOCTYPE html
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title无标题文档/title
style type="text/css"
#pop {
border: #000;
background-color: #CCC;
position: absolute;
left: 50px;
top: 50px;
width: 200px;
2、然后输入代码：
height: 500px;
display: none;
}
#btn {
color: #f00;
}
/style
/head
body
span id="btn"打开层/span
divaaaaaaaaaaaa/div
divaaaaaaaaaaaa/div
3、然后输入：
div id="pop"
浮层，点击这个浮层以外的区域，都可以隐藏这个浮层
pa href="javascript:;"最主要的是点这个div里面的链接，div照样不隐藏/a/p
/div
/body
/html
script type="text/javascript"
function $(id) { return document.getElementById(id); }
window.onload = function () {
document.onclick = function (e) {
$("pop").style.display = "none";
}
$("btn").onclick = function (e) {
4、最后输入：
$("pop").style.display = "block";
e = e || event; stopFunc(e);
}
$("pop").onclick = function (e) {
e = e || event; stopFunc(e);
}
}
function stopFunc(e) {
e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
}
/script
js显示和隐藏div如何修改
需要准备的材料分别有：电脑、html编辑器、浏览器。
1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。
2、在index.html中的script标签，输入js代码：$('button').click(function () {$('#123').css('display', 'block');});。
3、浏览器运行index.html页面，此时点击btn按钮后，div的内容成功被显示了出来。
隐藏一个div,但是这个div还是会占空间怎么办?
div隐藏后不占空间的写法：
可以尝试在div中加入style="DISPLAY: none;"这样就不会占空间了。如果写成：
style="DISPLAY: none;"
visibility属性：
确定元素显示还是隐藏；
visibility="visible|hidden"，visible 显示，hidden 隐藏。
当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
例如：
script language="javascript"
function toggleVisibility(me)
{
if (me.style.visibility=="hidden")
{
me.style.visibility="visible";
}
else
{
me.style.visibility="hidden";
}
}
/script
div onclick="toggleVisibility(this)" style="position:relative"
第一行文本将会触发"hidden"和"visible"属性，注意第二行的变化。
/div
div因为visibility会保留元素的位置，所以第二行不会移动./div
怎么用JS隐藏一个DIV层?
设置div对象的style.display属性为"none"即可隐藏该节点，设置属性为”block“可以显示之。实例演示如下：
1、HTML结构
input type="button" value="隐藏" onclick="fun(this)"
div id="test"我是一个DIV/div
2、javascript代码
function fun(obj){
var div = document.getElementById("test");
if(obj.value=="隐藏"){
div.style.display = "none";
obj.value = "显示";
} else {
div.style.display = "block";
obj.value = "隐藏";
}
}
3、效果演示
怎么让一个div显示一个div隐藏
让一个div显示一个div隐藏的方法如下（代码的规格写法只能这样）：
1、HTML代码如下：
body
ul
class="point"
lia
href="#"menu0/a/li
lia
href="#"menu1/a/li
lia
href="#"menu2/a/li
lia
href="#"menu3/a/li
lia
href="#"menu4/a/li
lia
href="#"menu5/a/li
lia
href="#"menu6/a/li
lia
href="#"menu7/a/li
/ul
div
class="box"
div
class="con0"d0/div
div
class="con1"d1/div
div
class="con2"d2/div
div
class="con3"d3/div
div
class="con4"d4/div
div
class="con5"d5/div
div
class="con6"d6/div
div
class="con7"d7/div
/div
/body
2、CSS代码：
.point{
float:
left;
list-style:
none;
}
.point
li{
margin-bottom:
10px;
}
.box{
float:
right;
margin-right:
500px;
}
.box
div{
width:
500px;
height:
200px;
border:
1px
solid
green;
display:
none;
}
.box
.con0{
display:
block;
}
3、Javascript代码：
$(document).ready(function(){
$(".point
li
a").click(function(){
var
order
=
$(".point
li
a").index(this);//点击之后可以返回当前a标签index的值
$(".con"
+
order).show().siblings("div").hide();
});
})