如何实现一个div的隐藏与显示？

zzxap 2008-09-30 08:52:12
页面上有一个按钮和一个div
div默认隐藏，当按按钮的时候div居中显示，后页面变灰。
按确定后，div重新隐藏，后页面显示。

如果先设置div的display:none
document.getElementById("id1")就找不到id1这个div

怎样实现一个div的隐藏与显示？
...全文
12237 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
black__Swan 2012-11-02
  • 打赏
  • 举报
 回复
divId.Style["style"] = "none";//divId表示div 的id，在该cs文件中添入
ZLY168 2012-02-16
  • 打赏
  • 举报
 回复
<script language="JavaScript" type="text/JavaScript">

function toggle(targetid){
if (document.getElementById){
target=document.getElementById(targetid);
if (target.style.display=="block"){
target.style.display="none";
} else {
target.style.display="block";
}
}
}

</script>

</head>

<body>
<h1>欢迎您首次登录</h1>
接下来给自己选择一个喜欢的头像吧
<button onclick="toggle('div1')">本地上传</button>


<center> <div id="div1" style="display: none"><h1>dhfsflsjdfj斤斤计较</h1></div></center>
</body>
qilifang343 2011-12-03
  • 打赏
  • 举报
 回复
这个lz解决了么。若是解决贴出来看一下。
lichking911 2011-11-01
  • 打赏
  • 举报
 回复
LZ的意思是不是写在 XXXweb.aspx.cs文件里面？我也在找这种办法，我想在点击按钮的时候显示隐藏层，还有初始化隐藏层里的一些内容。目前也在苦逼的满网上找
wrzs 2011-09-27
  • 打赏
  • 举报
 回复
很简单啊 设置js的id 然后就行啦
luck_man911 2009-04-10
  • 打赏
  • 举报
 回复
sss
web78dy 2008-10-07
  • 打赏
  • 举报
 回复
参考下面网站中的那个剧情内容按钮:
http://www.86p3.cn/html/video/dzp/2008106/2691.Html
shine046 2008-10-01
  • 打赏
  • 举报
 回复
你的意思是只用CSS?
Tommy_Tommy 2008-09-30
  • 打赏
  • 举报
 回复
转载网上的


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  

<title></title>  

<style>  

html,body{font-size:12px;margin:0px;height:100%;}  

.mesWindow{border:#666 1px solid;background:#fff;}  

.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}  

.mesWindowContent{margin:4px;font-size:12px;}  

.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}  

</style>  

<script>  

var isIe=(document.all)?true:false;  

//设置select的可见状态  

function setSelectState(state)  

{  

 var objl=document.getElementsByTagName('select');  

 for(var i=0;i<objl.length;i++)  

 {  

 objl[i].style.visibility=state;  

 }  

}  

function mousePosition(ev)  

 {  

 if(ev.pageX || ev.pageY)  

 {  

 return {x:ev.pageX, y:ev.pageY};  

 }  

 return {  

 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop  

 };  

 }  

//弹出方法  

function showMessageBox(wTitle,content,pos,wWidth)  

{  

 closeWindow();  

 var bWidth=parseInt(document.documentElement.scrollWidth);  

 var bHeight=parseInt(document.documentElement.scrollHeight);  

 if(isIe){  

 setSelectState('hidden');}  

 var back=document.createElement("div");  

 back.id="back";  

 var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";  

 styleStr+=(isIe)?"filter:alpha(opacity=40);":"opacity:0.40;";  

 back.style.cssText=styleStr;  

 document.body.appendChild(back);  

 var mesW=document.createElement("div");  

 mesW.id="mesWindow";  

 mesW.className="mesWindow";  

 mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='关闭' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";  

  

 styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";  

 mesW.style.cssText=styleStr;  

 document.body.appendChild(mesW);  

}  

 function showBackground(obj,endInt)  

{  

 obj.filters.alpha.opacity+=1;  

 if(obj.filters.alpha.opacity<endInt)  

 {  

 setTimeout(function(){showBackground(obj,endInt)},8);  

 }  

}  

//关闭窗口  

function closeWindow()  

{  

 if(document.getElementById('back')!=null)  

 {  

 document.getElementById('back').parentNode.removeChild(document.getElementById('back'));  

 }  

 if(document.getElementById('mesWindow')!=null)  

 {  

 document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));  

 }  

  

 if(isIe){  

 setSelectState('');}  

}  

//测试弹出  

function testMessageBox(ev)  

{  

 var objPos = mousePosition(ev);  

 messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";  

 showMessageBox('窗口标题',messContent,objPos,350);  

}  

</script>  

</head>  

<body>  

<div style="padding:20px">  

<div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>  

<div style="text-align:left;padding-left:20px;padding-top:10px";><select><option>下拉</option></select>弹出窗口时会将其隐藏，关闭时会让其显示，目的是在IE中防止弹出的DIV挡不住下拉框</div>  

<div style="text-align:center";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>  

<div style="text-align:right";><a href="#none" onclick="testMessageBox(event);">弹出窗口</a></div>  

</div>  

</body>  

</html>  



本文来自: 脚本之家(www.jb51.net) 详细出处参考：http://www.jb51.net/article/12462.htm
Cyril_Tam 2008-09-30
  • 打赏
  • 举报
 回复
IE6 FF2测试通过

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<STYLE>
#login{
position: relative;
display: none;
top: 20px;
left: 30px;
background-color: #ffffff;
text-align: center;
border: solid 1px;
padding: 10px;
z-index: 1;
}

</STYLE>


<script type="text/javascript">


var W = screen.width;//取得屏幕分辨率宽度
var H = screen.height;//取得屏幕分辨率高度

function M(id){
return document.getElementById(id);//用M()方法代替document.getElementById(id)
}
function MC(t){
return document.createElement(t);//用MC()方法代替document.createElement(t)
};
//判断浏览器是否为IE
function isIE(){
return (document.all && window.ActiveXObject && !window.opera) ? true : false;
}
//取得页面的高宽
function getBodySize(){
var bodySize = [];
with(document.documentElement) {
bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;//如果滚动条的宽度大于页面的宽度，取得滚动条的宽度，否则取页面宽度
bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;//如果滚动条的高度大于页面的高度，取得滚动条的高度，否则取高度
}
return bodySize;
}
//创建遮盖层
function popCoverDiv(){
if (M("cover_div")) {
//如果存在遮盖层，则让其显示
M("cover_div").style.display = 'block';
} else {
//否则创建遮盖层
var coverDiv = MC('div');
document.body.appendChild(coverDiv);
coverDiv.id = 'cover_div';
with(coverDiv.style) {
position = 'absolute';
background = '#CCCCCC';
left = '0px';
top = '0px';
var bodySize = getBodySize();
width = bodySize[0] + 'px'
height = bodySize[1] + 'px';
zIndex = 0;
if (isIE()) {
filter = "Alpha(Opacity=60)";//IE逆境
} else {
opacity = 0.6;
}
}
}
}




//让登陆层显示为块
function showLogin()
{
var login=M("login");
login.style.display = "block";
}

//设置DIV层的样式
function change(){
var login = M("login");
login.style.position = "absolute";
login.style.border = "1px solid #CCCCCC";
login.style.background ="#F6F6F6";
var i=0;
var bodySize = getBodySize();
login.style.left = (bodySize[0]-i*i*4)/2+"px";
login.style.top = (bodySize[1]/2-100-i*i)+"px";
login.style.width = i*i*4 + "px";
login.style.height = i*i*1.5 + "px";

popChange(i);
}
//让DIV层大小循环增大
function popChange(i){
var login = M("login");
var bodySize = getBodySize();
login.style.left = (bodySize[0]-i*i*4)/2+"px";
login.style.top = (bodySize[1]/2-100-i*i)+"px";
login.style.width = i*i*4 + "px";
login.style.height = i*i*1.5+ "px";
if(i<=10){
i++;
setTimeout("popChange("+i+")",10);//设置超时10毫秒
}
}
//打开DIV层
function open()
{
change();
showLogin();
popCoverDiv()
void(0);//不进行任何操作,如：<a href="#">aaa</a>
}
//关闭DIV层
function close(){
M('login').style.display = 'none';
M("cover_div").style.display = 'none';
void(0);
}

</script>
</head>

<body>

<a href="javascript:open();">登陆</a>

<div id="login">
<span>用户登陆</span>
<div id="panel">
用户名:<input type="text" size="20" />


密码: <input type="password" size="20">


<input type="checkbox" value="登录" />
</div>
<input type="button" value="提交" />




<a href="javascript:close();">关闭</a>
</div>
</body>
</html>
allen0228 2008-09-30
  • 打赏
  • 举报
 回复
上面的是菜单 看做你的要求了
不好意思
按照你的要求 应该是js中thickbox 这个要有jquery
你上百度 有现成的例子 可以直接用
allen0228 2008-09-30
  • 打赏
  • 举报
 回复
刚好我昨天帮别人做了两个
代码给你 自己看吧
<style type="text/css">

<!--

.menu{

	border:red 1px solid;

	position:absolute;

	width:100px;

	height:auto !important;

	height:100%;

	top:42px !important;

	top: 41px;	

	z-index:99;

	display:none;

	border:#ccc 1px solid;

	color:#ccc;

}



ul{

   text-align:left;

}



ul li{

   display:block;

   list-style-type: none; 

   float:left;

   width:100px;

   height:25px;

   border-right:red 1px solid;

   border-bottom:red 1px solid;

   border-top:red 1px solid;

   line-height:25px;

}



ul li#first{

   border-left:red 1px solid;

}

   

ul li a{

   margin-left:30px;

   text-decoration:none;

   color:#000;

   

}



ul li a:hover{

   margin-left:30px;

   text-decoration:none;

   color:#CCC;

   

}



-->

</style>

<script language="javascript">

function $(id){

  return document.getElementById(id);

}



function Show(arg){

  $(arg).style.display="block";

}



function Hide(arg){

  $(arg).style.display="none";

}



</script>

  <ul>

  <li onmouseover="Show('menu1')" onmouseout="Hide('menu1')" id="first"><a href="#">menu1</a><br />

       <div id="menu1" class="menu" ><!--级联菜单-->

          <table>

			<tr><td>menu1_1</td></tr>

            <tr><td>menu1_1</td></tr>

            <tr><td>menu1_1</td></tr>

		  </table>      

       </div>

  </li>

  <li onmouseover="Show('menu2')" onmouseout="Hide('menu2')"><a href="#">menu2</a><br />

        <div id="menu2" class="menu"><!--级联菜单-->

          <table>

			<tr><td>menu2_1</td></tr>

            <tr><td>menu2_1</td></tr>

            <tr><td>menu2_1</td></tr>

		  </table>

        </div></li>

  <li onmouseover="Show('menu3')" onmouseout="Hide('menu3')"><a href="#">menu3</a><br />

        <div id="menu3" class="menu"><!--级联菜单-->

          <table>

			<tr><td>menu3_1</td></tr>

            <tr><td>menu3_1</td></tr>

            <tr><td>menu3_1</td></tr>

		  </table>

        </div>

  </li>

  <li onmouseover="Show('menu4')" onmouseout="Hide('menu4')"><a href="#">menu4</a><br />

        <div id="menu4" class="menu"><!--级联菜单-->

          <table>

			<tr><td>menu4_1</td></tr>

            <tr><td>menu4_1</td></tr>

            <tr><td>menu4_1</td></tr>

		  </table>

        </div>

  </li>

  </ul>



  <p> </p>

  <p>实现边框不重叠的效果还有一种办法就是marig属性 加上背景 有很细的裂缝 可以看成是边框</p>


说明：在li结构中 级联菜单部分不能用<p>..</p>
这个还没有搞清楚 为什么
西安风影 2008-09-30
  • 打赏
  • 举报
 回复
如果先设置div的display:none
document.getElementById("id1")就找不到id1这个div
==========
可以通过id得到这个div的
Cyril_Tam 2008-09-30
  • 打赏
  • 举报
 回复
不要JS? 贴你的代码出来看看
zzxap 2008-09-30
  • 打赏
  • 举报
 回复
弹出的div能不能不写在js里面

我要弹出的div不是写在js里面的
html中的div怎么隐藏显示出来,js实现元素div/ul li的显示与隐藏
在网页设计过程中，某些时候需要隐藏一些元素(div/ul li)，某些时候又需要显示一些隐藏的元素。例如一打开网页显示一段网站公告，过一小段时间后把公告隐藏起来。...一、js实现元素div隐藏与显示1、单...
前端：实现div的隐藏与显示
前端：实现div的隐藏与显示
html动态显示隐藏div,div隐藏与显示属性 怎么让一个div显示一个div隐藏
怎么让一个div显示一个div隐藏 总是显示 function showhidediv(123){ var sbtit有三种方法实现，原声js两种，还有一种jquery的，其实只是写法不同。方法如下： 显示内容点击显示/*原生的js写法*/function showdiv(){...
div 隐藏和显示
div 隐藏和显示
JS jQuery显示隐藏div的几种方法
&...通过设置display属性可以使div隐藏后释放占用的页面空间. style="display: none;" document.getElementById("demo").style.display="none";//隐藏 document.ge
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章