重新请教:div 中 display:none时 里面 iframe 不显示的问题

qddoudouqd 2008-10-09 03:46:07
请教 div 中 display:none时 里面 iframe 不显示的问题

昨天晚上发贴没表述明白,今天重新开贴,我重新 表述一下!

代码

=====================================================================================================
<script>
function g(o){return document.getElementById(o);}
function newsShow(n){ //如果有N个标签,就将i<=N; 本功能非常OK,兼容IE7,FF,IE6;
for(var i=1;i<=2;i++)
{g('news_'+i).className='UnNewstab';g('Newstab_0'+i).className='unNewShow';}
g('news_'+n).className='Newstab'; g('Newstab_0'+n).className='Newshow';
}
//
</script>
<style media="screen" type="text/css">
#news_menu{ width:740px; height:31px; float:left; margin-left:14px;
background-image:url(images/top_leibie_bg_line.jpg)}
#news_menu ul{ margin:0;} /*ul 居左代码 */
#news_menu li{ float:left; padding-top:10px}

.Newstab { background-image: url('images/top_leibie_bg1.jpg'); background-repeat: no-repeat; color:#ffffff; font-weight:bold; font-size:14px;width:101px; height:27px}
.UnNewstab { background-image:url('images/top_leibie_bg2.jpg'); background-repeat: no-repeat; color:#756250;width:92px; height:27px}

.NewShow{display:block;}
.unNewShow{display:none;}
</style>
<div id=news_menu>
<ul>
<li id="news_1" class="Newstab" onmouseover="newsShow(1);">
<div align="center">优惠期</div>
</li>
<li id="news_2" class="UnNewstab" onmouseover="newsShow(2);">
<div align="center">普通优惠期</div>
</li>
</ul>
</div>
<div class="NewShow" id="Newstab_01">
<iframe src="inc_0.asp" align="top" frameborder="0" scrolling="no" width="100%" id=ifm></iframe>
</div>
<div class="unNewShow" id="Newstab_02">
<iframe src="inc_1.asp" align="top" frameborder="0" scrolling="no" width="100%" id=ifm1></iframe>
</div>
=============================================================

这是我首页显示的全部代码!

功能:就是一个滑动显示 内容的页,鼠标放到第一个内容标题时,显示 第一个 标题内容,隐藏第二个, 反之,显示第二个,隐藏第一个

<div class="NewShow" id="Newstab_01">
</div>
<div class="unNewShow" id="Newstab_02">
</div>

问题就是 这里,显示两块不同内容的 div
Newstab_01 里是 默认显示的,,Newstab_02是默认不显示


出现 的问题
==============================
当打开 网页时,显示正常,[第一个 iframe显示,第二个iframe不显示]

当把鼠标放到第二个 的标题时,,第一个 按我 要求 隐藏了,可是第二个 iframe他不出来了!
====================================================================
应该不是我代码的问题!
因为 我在第二个div里写入文本信息,加入表格 ,都是可以按我的功能要求 正常显示的!
而且 我把 第二个div 默认 隐藏的属性去掉后,他也是显示正常的!

所以我判断出 ,是因为第二个 div 默认隐藏的 属性 让 ifame 的 scr 失效了!!


应该设置哪个地方,让我的 第二个 div 里的 iframe 的 scr 是正常显示??
...全文
890 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
newtanglu 2009-12-30
  • 打赏
  • 举报
 回复
ding
浪尖赏花 2009-01-19
  • 打赏
  • 举报
 回复
用IFRAME的话，没必要用多个DIV的呀，onmouseover时去改变IFRAME的SRC就可以了呀
ppcpu 2009-01-19
  • 打赏
  • 举报
 回复
今天我也遇到这样的问题，在设置显示的语句后面加上一句alert();就行了，真怪了，但这样成什么了。。。。
gaocctv 2008-10-09
  • 打赏
  • 举报
 回复
<script src="jquery.js" language="javascript"></script>
<script language="javascript">
$(function(){
$("#Newstab_01").hover(
$(this).show();
$("#Newstab_02").hide();
),
$("#Newstab_02").hover(
$(this).show();
$("#Newstab_01").hide();
);
});
</script>

以上使用jquery解决这个问题的方法，我就是用这个实现你要的类似的效果的
gaocctv 2008-10-09
  • 打赏
  • 举报
 回复
是不是浏览器的问题
qddoudouqd 2008-10-09
  • 打赏
  • 举报
 回复
不太行啊!
includezoluo 2008-10-09
  • 打赏
  • 举报
 回复
你的代码在我这就可以用
字太多没看懂你什么意思 拿个自己以前做的看看对你有没有帮助
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.nav {
margin:0;
padding:0;
/*顶部对齐间距设置 - 越靠上*/
white-space:nowrap;
margin-top:6px;
font-family:36px;
}
.nav li {
display:inline;
list-style-type: none;
padding:0px;
margin-left:2px;
vertical-align:bottom;
height:19px;
}
.nav li a {
padding:0px 16px;
text-decoration:none;
vertical-align:middle;
color:#14069E;
}
.nav li a:link,#nav li a:visited{
text-decoration:none;
}
.my_onmuseselect{
font-family:"幼圆", "宋体", Arial;
font-size:12px;
color:#000000;
background-color:#0099FF;
background-repeat:repeat-x;
border:1px solid #789DF9;
border-bottom:0px;
}
.my_onmuseunselect{
font-family:"幼圆", "宋体", Arial;
font-size:12px;
background-color:#CCCCCC;
background-repeat:repeat-x;
border:1px solid #CCCCCC;
border-bottom:0px;
color:#FFFFFF;
}
</style>
<script language="javascript">
function navigation(n,w){
for(i=1;i<w+1;i++){
if(i==n)
document.getElementById("li"+i).className="my_onmuseselect";
else
document.getElementById("li"+i).className="my_onmuseunselect";
}
}
function divshow(n,w){
for(i=1;i<w+1;i++){
if(i==n){
document.getElementById("div"+i).style.display="block";
}
else{
document.getElementById("div"+i).style.display="none";
}
}
}
</script>
<style type="text/css">
<!--
#div1 {
position:absolute;
padding:1px 1px;
width:100%;
height:100%;
z-index:1;
display:block;
}
#div2 {
position:absolute;
padding:1px 1px;
width:100%;
height:100%;
z-index:1;
display:none;
}
#div3 {
position:absolute;
padding:1px 1px;
width:100%;
height:100%;
z-index:1;
display:none;
}
#div4 {
position:absolute;
padding:1px 2px;
width:100%;
height:100%;
z-index:1;
display:none;
}
.tablesyle{
border:1px solid #789DF9;
}
.tablesyle th{
font-family:"宋体", Arial;
font-size:12px;
text-align:center;
color:#FFFFFF;
font-weight:bold;
}
.tablesyle td{
font-family:"宋体", Arial;
font-size:12px;
text-align:center;
color:#000000;
font-weight:normal;
}
-->
</style>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td height="21">
<ul class="nav">
<li id="li1" class="my_onmuseselect" onClick="navigation(1,4);divshow(1,4);"><a href="#" onFocus="this.blur()">首页</a></li>
<li id="li2" class="my_onmuseunselect" onClick="navigation(2,4);divshow(2,4);"><a href="#" onFocus="this.blur()">今天星期三</a></li>
<li id="li3" class="my_onmuseunselect" onClick="navigation(3,4);divshow(3,4);"><a href="#" onFocus="this.blur()">今天星期三</a></li>
<li id="li4" class="my_onmuseunselect" onClick="navigation(4,4);divshow(4,4);"><a href="#" onFocus="this.blur()">今天星期三</a></li>
</ul>
</td>
</tr>
<tr>
<td>
<div id="div1">
<table class="tablesyle" border="0" cellpadding="1" cellspacing="1" width="100%">
<tr bgcolor="#789DF9">
<th>序号</th>
<th>姓名</th>
<th>昵称</th>
<th>家庭住址</th>
<th>电子邮件</th>
</tr>
<tr>
<td>01</td>
<td>**</td>
<td>**</td>
<td>**</td>
<td>**</td>
</tr>
<tr>
<td>01</td>
<td>****</td>
<td>****</td>
<td>****</td>
<td>****</td>
</tr>
<tr>
<td>01</td>
<td>********</td>
<td>********</td>
<td>********</td>
<td>********</td>
</tr><tr>
<td>01</td>
<td>****</td>
<td>****</td>
<td>****</td>
<td>****</td>
</tr>
<tr>
<td>01</td>
<td>********</td>
<td>********</td>
<td>********</td>
<td>********</td>
</tr>
</table>
</div>
<div id="div2">
<table class="tablesyle" border="0" cellpadding="1" cellspacing="1" width="100%">
<tr bgcolor="#789DF9">
<th>序号</th>
<th>姓名</th>
<th>昵称</th>
<th>家庭住址</th>
<th>电子邮件</th>
</tr>
<tr>
<td>01</td>
<td>********</td>
<td>********</td>
<td>********</td>
<td>********</td>
</tr>
<tr>
<td>01</td>
<td>********</td>
<td>********</td>
<td>********</td>
<td>********</td>
</tr>
<tr>
<td>01</td>
<td>********</td>
<td>********</td>
<td>********</td>
<td>********</td>
</tr><tr>
<td>01</td>
<td>********</td>
<td>********</td>
<td>********</td>
<td>********</td>
</tr>
<tr>
<td>01</td>
<td>********</td>
<td>********</td>
<td>********</td>
<td>********</td>
</tr>
</table>
</div>
<div id="div3">
<table class="tablesyle" border="0" cellpadding="1" cellspacing="1" width="100%">
<tr bgcolor="#66CCFF">
<th>序号</th>
<th>姓名</th>
<th>昵称</th>
<th>家庭住址</th>
<th>电子邮件</th>
</tr>
<tr>
<td>01</td>
<td>****</td>
<td>****</td>
<td>****</td>
<td>****</td>
</tr>
<tr>
<td>01</td>
<td>****</td>
<td>****</td>
<td>****</td>
<td>****</td>
</tr>
<tr>
<td>01</td>
<td>****</td>
<td>****</td>
<td>****</td>
<td>****</td>
</tr><tr>
<td>01</td>
<td>****</td>
<td>****</td>
<td>****</td>
<td>****</td>
</tr>
<tr>
<td>01</td>
<td>****</td>
<td>****</td>
<td>****</td>
<td>****</td>
</tr>
</table>
</div>
<div id="div4">
<table class="tablesyle" border="0" cellpadding="1" cellspacing="1" width="100%">
<tr bgcolor="#789DF9">
<th>序号</th>
<th>姓名</th>
<th>昵称</th>
<th>家庭住址</th>
<th>电子邮件</th>
</tr>
<tr>
<td>01</td>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>
</tr>
<tr>
<td>01</td>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>
</tr>
<tr>
<td>01</td>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>
</tr><tr>
<td>01</td>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>
</tr>
<tr>
<td>01</td>
<td>*</td>
<td>*</td>
<td>*</td>
<td>*</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Cyril_Tam 2008-10-09
  • 打赏
  • 举报
 回复
我试不过那效果,以下面的方式来写display不知对你有没有帮助



<script> 

function g(o){return document.getElementById(o);} 

function newsShow(n){ //如果有N个标签,就将i <=N;  本功能非常OK,兼容IE7,FF,IE6; 

	for(var i=1;i <=2;i++) 

	{

		g('news_'+i).className='UnNewstab';

		//g('Newstab_0'+i).className='unNewShow';

		g('Newstab_0'+i).style.display = "none";	} 

	g('news_'+n).className='Newstab'; 

	//g('Newstab_0'+n).className='Newshow'; 

	g('Newstab_0'+n).style.display = "block";} 

// 

</script>
happy002 2008-10-09
  • 打赏
  • 举报
 回复
是不是可以用
document.getElementById("").style.display = 'block'
和
document.getElementById("").style.display = 'none'
来控制显示和隐藏呢？

这个我也不是很熟，不知道对不对
技术专家教你做网站-HTML青少儿编程课
HTML语法HTML第一站第三课：body元素HTML第一站第四课：HTML结构HTML第一站第五课：标题HTML第一站第六课：div元素HTML第一站第七课：属性HTML第一站第八课：显示文本HTML第一站第九课：样式文本HTML第一站第十课：...
js修改display，在none和block之间切换不显示问题
问题一：display属性值修改成功不显示 一个div，初始属性值为：display:none； 通过点击某a链接，调用某js函数，修改其display值为block； 成功！但页面不显示。 *解决：其父元素设置最小高度，使其包含这个div ...
iframe display:none 自适应 需要判断src加载情况
"> <iframe id='modcontent' name='modcontent' frameborder='0' src='test.html' <br />scrolling='no' ></iframe> </div>   display为none的时候，iframe是不能自适应的，需要判断src是否...
display：none会不会导致其所占空间消失？
display：none；的验证结果是该元素所占空间消失，验证例子为： <!DOCTYPE html> <html> <head> <title>test</title> <style type="text/css"> div{ width:500px; height:...
奇怪的safari：0像素的iframe不能被display:none的div圈住隐藏
0x0的iframe在ie下没有任何显示，而FireFox浏览器上却会显示一个黑点。很多web2.0应用在FireFox下都有那一个个的黑点。我尝试用来隐藏黑点。...但是这是个不该发生的问题，display是一个CSS样式而已，影
CSS

61,112

社区成员

60,730

社区内容

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

加载中

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

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

+ 用AI写文章