Question

如何通过js实现隐藏和显示DIV?

如图,我需要点击"TIPS"按扭时显示下方TIPS标题的DIV内容。点击此DIV内的“X“关闭DIV便隐藏。技术不是太好，写的不杂样。请高手指点。
附代码：
<div id="Header">
<div id="company">An yname Inc</div>
<div id="menu_td">
<ul>
<li><a href="#"><img src="images/3d_wall_04.jpg" name="Image1" width="45" height="46" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','images/3d_wall_04_08.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li><a href="#"><img src="images/3d_wall_044.jpg" name="Image2" width="45" height="46" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','images/3d_wall_04_05.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li><a href="#"><img src="images/3d_wall_02.jpg" name="Image3" width="45" height="46" border="0" id="Image3" onmouseover="MM_swapImage('Image3','','images/3d_wall_04_07.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li><a href="#"><img src="images/3d_wall_043.jpg" name="Image4" width="45" height="46" border="0" id="Image4" onmouseover="MM_swapImage('Image4','','images/3d_wall_04_06.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li><a href="#"><img src="images/3d_wall_046.jpg" name="Image5" width="45" height="46" border="0" id="Image5" onmouseover="MM_swapImage('Image5','','images/3d_wall_04_01.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li><a href="#"><img src="images/3d_wall_045.jpg" name="Image6" width="45" height="46" border="0" id="Image6" onmouseover="MM_swapImage('Image6','','images/3d_wall_04_02.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
</ul>
</div>
<div id="log_out">
<div id="use"><a href="#">TIPS</a></div>
| <a href="#">Home</a> | <a href="#">FAQ</a> | <a href="#">About</a> | <a href="#">Log out</a> | </div>
</div>
<!--中部主体内容区-->
<div id="Below_new">
<div ><img src="images/ues_03.jpg" width="71" height="23" align="left" />
<div id="tc"><a href="#"><img src="images/dx_08.jpg" width="23" height="22" border="0" /></a></div>
</div>
<div id="Below_new_use" style="clear:both;">
<ul>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="checkbox" name="checkbox" id="checkbox" />
Do not show this content</label>
<label>
<input type="submit" name="button" id="button" value=" OK " />
</label>
</form>
</ul>
<div style="clear:both;"></div>
</div>
</div>

Answer 1

在控制处添加onclick=abc('dd')事件，dd是你想要控制的div，然后
<script type="text/javascript">

function abc(a){
var flag = document.getElementById(a).style.display;
if(flag=='none')
document.getElementById(a).style.display='block';
if(flag=='block')
document.getElementById(a).style.display='none';
}

Answer 2

先设置隐藏的地方为display:none
点击TIPS按纽时触发动作
doxument.getElementById("这里是你不ID").style.display="block";
点击“X“关闭时再触发动作
doxument.getElementById("这里是你不ID").style.display="none";

Answer 3

设置层style="display:none"
点击TIPS按纽时触发动作
doxument.getElementById("层的ID").style.display="block";
点击“X“关闭时再触发动作
doxument.getElementById("层的ID").style.display="none";

Answer 4

如下
style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示
此JS代码中，没有用try——Catch捕获错误，代码如下：
<script language="javascript">
//创建一个showhidediv的方法，直接跟ID属性
function showhidediv(id){
var sbtitle=document.getElementById(id);
if(sbtitle){
if(sbtitle.style.display=='block'){
sbtitle.style.display='none';
}else{
sbtitle.style.display='block';
}
}
}
</script>
<div id="show" onMouseMove='showhidediv("msg")';>鼠标移动这里</div><!--这里是点击div，ID要下面的ID-->
<div id="msg" style="display:none;">出现显示的内容</div> <!--这里是MsgDiv-->
onMouseMove='showhidediv("msg")'; 这里是鼠标动作，可以替换成Click或其他！
再次升级，做两个层之间的切换：
<script language="javascript">
//创建一个showhidediv的方法，直接跟ID属性
function showhidediv(id){
var age=document.getElementById("msg_2");
var name=document.getElementById("msg_1");
if (id == 'name') {
if (name.style.display=='none') {
age.style.display='none';
name.style.display='block';
}
} else {
if (age.style.display=='none') {
name.style.display='none';
age.style.display='block';
}
}
}
</script>
<div id="show" style="float:left;" onMouseMove='showhidediv("name")';>Name：</div><div id="show" style="float:left;" onMouseMove='showhidediv("age")';>Age：</div>
<div id="msg_1" style="display:none;float:left;">林雨林</div>
<div id="msg_2" style="display:none;float:left;">18</div>

Answer 5

<script type="text/javascript">

function show_div(){
document.getElementById('Below_new').style.display='block';
}

function hid_div(){
document.getElementById('Below_new').style.display='none';
}

</script>

<div id="Header">
<div id="company">An yname Inc</div>
<div id="menu_td">
<ul>
<li><a href="#"><img src="images/3d_wall_04.jpg" name="Image1" width="45" height="46" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','images/3d_wall_04_08.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li><a href="#"><img src="images/3d_wall_044.jpg" name="Image2" width="45" height="46" border="0" id="Image2" onmouseover="MM_swapImage('Image2','','images/3d_wall_04_05.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li><a href="#"><img src="images/3d_wall_02.jpg" name="Image3" width="45" height="46" border="0" id="Image3" onmouseover="MM_swapImage('Image3','','images/3d_wall_04_07.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li><a href="#"><img src="images/3d_wall_043.jpg" name="Image4" width="45" height="46" border="0" id="Image4" onmouseover="MM_swapImage('Image4','','images/3d_wall_04_06.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li><a href="#"><img src="images/3d_wall_046.jpg" name="Image5" width="45" height="46" border="0" id="Image5" onmouseover="MM_swapImage('Image5','','images/3d_wall_04_01.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
<li><a href="#"><img src="images/3d_wall_045.jpg" name="Image6" width="45" height="46" border="0" id="Image6" onmouseover="MM_swapImage('Image6','','images/3d_wall_04_02.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></li>
</ul>
</div>
<div id="log_out">
<div id="use"><a href="javascript:show_div()">TIPS</a></div>
| <a href="#">Home</a> | <a href="#">FAQ</a> | <a href="#">About</a> | <a href="#">Log out</a> | </div>
</div>
<!--中部主体内容区-->
<div id="Below_new" style="display:none">
<div ><img src="images/ues_03.jpg" width="71" height="23" align="left" />
<div id="tc"><a href="javascript:hid_div()"><img src="images/dx_08.jpg" width="23" height="22" border="0" /></a></div>
</div>
<div id="Below_new_use" style="clear:both;">
<ul>
<form id="form1" name="form1" method="post" action="">
<label>
<input type="checkbox" name="checkbox" id="checkbox" />
Do not show this content</label>
<label>
<input type="submit" name="button" id="button" value=" OK " />
</label>
</form>
</ul>
<div style="clear:both;"></div>
</div>
</div>