CSDN-CSDN社区-Web 开发-HTML(CSS)

收藏 重新请教:div 中 display:none时 里面 iframe 不显示的问题 [问题点数:20分]

  • qddoudouqd
  • (初学者)
  • 等　级：
  • 结帖率：
楼主发表于：2008-10-09 15: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  是正常显示??
回复次数：9
  • happy002用户头像
  • happy002
  • (狂奔蜗牛（转做C++）)
  • 等　级：
#1楼 得分：0回复于：2008-10-09 16:03:50
是不是可以用
document.getElementById("").style.display = 'block'
和
document.getElementById("").style.display = 'none'
来控制显示和隐藏呢？

这个我也不是很熟，不知道对不对
#2楼 得分：0回复于：2008-10-09 16:05:53
我试不过那效果,以下面的方式来写display不知对你有没有帮助

HTML code

<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';
        [b]g('Newstab_0'+i).style.display = "none";[/b]    } 
    g('news_'+n).className='Newstab'; 
    //g('Newstab_0'+n).className='Newshow'; 
    [b]g('Newstab_0'+n).style.display = "block";[/b]} 
// 
</script>
#3楼 得分：0回复于：2008-10-09 17:05:14
你的代码在我这就可以用   
字太多没看懂你什么意思  拿个自己以前做的看看对你有没有帮助
<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>
#4楼 得分：0回复于：2008-10-09 17:49:14
不太行啊!
  • gaocctv用户头像
  • gaocctv
  • (高山流水)
  • 等　级：
#5楼 得分：0回复于：2008-10-09 17:57:31
是不是浏览器的问题
  • gaocctv用户头像
  • gaocctv
  • (高山流水)
  • 等　级：
#6楼 得分：0回复于：2008-10-09 18:06:10
<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解决这个问题的方法，我就是用这个实现你要的类似的效果的
  • ppcpu用户头像
  • ppcpu
  • (ppcpu)
  • 等　级：
#7楼 得分：0回复于：2009-01-19 17:41:58
今天我也遇到这样的问题，在设置显示的语句后面加上一句alert();就行了，真怪了，但这样成什么了。。。。
#8楼 得分：0回复于：2009-01-19 18:25:21
用IFRAME的话，没必要用多个DIV的呀，onmouseover时去改变IFRAME的SRC就可以了呀
#9楼 得分：0回复于：2009-12-30 15:18:19
ding
相关问题
请教div 中display:none时里面iframe 不显示的问题
请教在&lt;DIV id=&quot;div1&quot; style=&#39;display:block&#39;&gt;的宽度改变时，如何防止 ...
请教：在a.htm文件中用iframe嵌入一个b.aspx文件。在b.aspx文件中输出 ...
高分请教!!! 如何在一个页面中实现,当这个页面还在LOAD时,先在页面上 ...
请教document.onclick的问题
求一个弹出窗口的做法(在图层中放一个IFRAME) .NET技术/ ASP.NET ...