.js显示隐藏div中的隐藏div

时间:2012-02-02 17:52:18

标签: javascript html

提前感谢您的帮助!这是我的第一篇文章,不确定格式,所以我希望我已经正确完成了。

我想知道我是否可以使用从http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../style/lyr_swap.htm获取的以下脚本显示/隐藏隐藏的嵌套div:

<script type="text/javascript">

function swapLyr(num) {
idCount=0

while(document.getElementById("mydiv"+idCount)){
el=document.getElementById("mydiv"+idCount)

if(idCount != num){
el.style.display="none"
}
else{
el.style.display="block"
}

idCount++

}

}

</script>

<ul>
<li onclick="swapLyr(0)">Show Green</li>
<li onclick="swapLyr(1)">Show Yellow</li> 
<li onclick="swapLyr(2)">Show Red</li>
<li onclick="swapLyr(3)">Show Blue</li>
</ul>

<div id="mydiv0" style="display:none;background-color:#00AA00;width:350px; height:260px">Green</div>
<div id="mydiv1" style="display:none;background-color:#AAAA00;width:350px; height:260px">Yellow</div>
<div id="mydiv2" style="display:none;background-color:#AA0000;width:350px; height:260px">Red</div>
<div id="mydiv3" style="display:none;background-color:#0000AA;width:350px; height:260px">Blue</div>

我想使用类似的东西:

<div id="mydiv3" style="display:none;background-color:#0000AA;width:350px; height:260px">Blue<br /><br />
    <a href="#null" onclick="swapLyr(5)">Show Hidden Div within this Div</li>
    <div id="mydiv5" style="display:none;background-color:#FFF;width:300px; height:210px">Hidden Div Within "Blue" div</div>
</div>

1 个答案:

答案 0 :(得分:-1)

我知道了。用这个:

<div id="mydiv3" style="background-color:#0000AA;width:350px; height:260px">Blue<br /><br />
    <a href="#" onclick="swapLyr(5);">Show Hidden Div within this Div</a>
    <div id="mydiv5" style="display:none;background-color:#FFF;width:300px; height:210px">Hidden Div Within "Blue" div</div>
</div>
<script>
function swapLyr(num) {
    el=document.getElementById("mydiv"+num);
    if(el.style.display=="none"){
        el.style.display="block";
    }else{
        el.style.display="none";
    }
}
</script>