Question

我有一个包含框架集的索引文件：

<frameset border="1" frameborder="0" framespacing="0" rows="7%,93%">
  <frame src="index_top.htm" scrolling="no" marginwidth="0"
  marginheight="0" noresize name="top" target="_self">
    <frame name="main" src="index_main.html"
    scrolling="auto" marginwidth="0" marginheight="0">
  <noframes>

index_top文件如下所示（只是相关部分）：

<table width="100%" border="0" align="left" cellpadding="3" cellspacing="3" class="menyrad">
  <tr valign="middle" align="center">
    <td width="10%" id="homenav"><a href="framsida_test.html" onClick="changeClass(1)">Furniture home</a></td>
    <td width="10%" colspan="6">Currently browsing: <i id="mainlink"><span id="header">Select page</span><div id="linkdiv"><p><a href="coffee.html" id="link1" onClick="changeHeader(2)">Coffee tables</a></p><p>
<a href="side.html" id="link2" onClick="changeHeader(3)">Side tables</a></p><p><a href="stand.html" id="link3" onClick="changeHeader(4)">Stand tables</a></p><p>
<a href="dinner.html" id="link4" onClick="changeHeader(5)">Dinner tables</a></p><p><a href="sp.html" id="link5" onClick="changeHeader(6)">Stools/Pedestals</a></p></div></i></td>
    <td width="4%" id="galleriesnav"><a href="galleries.html" onClick="changeClass(2)">Galleries</a></td>
    <td width="4%" id="pressnav"><a href="press.html" onClick="changeClass(3)">Press</a></td>
    <td width="4%" id="factsnav"><a href="facts.html" onClick="changeClass(4)">Facts</a></td>
    <td width="4%" id="contactnav"><a href="contact.php" onClick="changeClass(5)">Contact</a></td>
    <td width="10%"><a href="http://www.carlson.se" target="_new">About artist Carlson</a></td>
  </tr>    
 </table>

index_top的相关CSS：

#linkdiv
{
    position:absolute;
    visibility:hidden;
    left:502px;
    width:100px;
    height:130px;
    background-color:#FFF;
    border-style:solid;
    border-color:black;
    border-width:2px;
    font-style:normal;

}

#header
{
    display:inline-block;
    text-align:center;
    width:100px;
}



#link1, #link2, #link3, #link4, #link5, #link6
{
    color:#000;
    text-decoration:none;
    width:100%;
    display:block;
    outline:0;
}

#link1:hover, #link2:hover, #link3:hover, #link4:hover, #link5:hover, #link6:hover
{
    width:100%;
    color:#FFF;
    font-weight:bold;
}

#mainlink:hover #linkdiv
{
    visibility:visible;
}

Aaaa和JavaScript：

function changeClass(Index)
{
    var ids = new Array("null","homenav","galleriesnav","pressnav","factsnav","contactnav");
    var color = new Array("null","#c9a900","#4814a9","#71a28a","#ac27a9","#998f86");
    var i=1;
    var length = ids.length;
    while (i<length)
    {
        document.getElementById(ids[i]).style.backgroundColor = '#FFF';
        document.getElementById(ids[i]).className = "blacklink";
        document.getElementById(ids[Index]).style.backgroundColor =color[Index];
        document.getElementById(ids[Index]).className = "whitelink";
        i++;
    }

}

function changeHeader(HeadIndex)
{
    var headers = new Array("null","Select page","Coffee tables","Side tables","Stand tables","Dinner tables","Stools","Pedestals");
    var colors = new Array("null","#f32837","#0085cf","#00aa86","#c99900","c42695","#617f90");
    document.getElementById("header").innerHTML = headers[HeadIndex];
    if (HeadIndex > 1)
    {
        document.getElementById("header").style.fontWeight = "bold";
        document.getElementById("header").style.color = "#FFF";
        document.getElementById("header").style.backgroundColor = colors[HeadIndex];
        document.getElementById("header").style.fontStyle = "normal";
    }

}

所以，我的问题（对不起大量的代码）是，当您尝试将鼠标悬停在“选择页面”文本上时，隐藏的div正在显示...但在主要内容下帧。因此，按下链接是不可能的。如何在主框架上显示div以便可点击？有可能吗？

Answer 1

在框架的index.html OUTSIDE中包含您的show / hide div。然后使用css定位和z-index强制它出现在帧上方。

在另一帧中显示div

1 个答案: