Question

我正在使用HTML页面，我将链接显示为“SHOW”，同时点击我需要显示div区域。 DIV有iframe的地方。

通常在加载HTML页面时，div应该处于隐藏状态，同时单击它应该显示。

我需要在该链接中关闭按钮。点击它我需要关闭隐藏的潜水。

<a href="#" onClick="toggleDisplay('toHide')">a</a>
function toggleDisplay(id)
    {
       if (!document.getElementById) {  return; }
       var el = document.getElementById('straddle');
       if (el.style.display == ''){
          el.style.display = 'none';
       }else {
          el.style.display = '';
       }
    }

我不想要这个切换功能

请帮帮我。

Answer 1

你的javascript

    <script type="text/javascript">
<!--
    var whatever = document.getElementById('mydiv');
    whatever.style.display = 'none';

    function show(){
          whatever.style.display = 'block';   
    }

    function hide(){
          whatever.style.display = 'none';
         }
//-->
</script>

然后是HTML

    <a href="#" onclick="show();">Click here to show element </a>
<br/>
<div id="mydiv">
This will disappear and reappear and 
<a href="#" onclick="hide();">Click here remove element</a></div>`

Answer 2

使用jQuery：

$(document).ready(function() {
    $('#link1').click(function() { $('#div').css({ display:'none' }) })
    $('#link2').click(function() { $('#div').css({ display:'block' }) })
})

Answer 3

您可能需要this（Iframe可能需要一段时间才能加载，因此请加载）

<强> HTML：

<a href="#" id="show">Show</a>
<div id="straddle">
    <div id="close">Close</div>
    <iframe width='100%' src="http://heera.it"></iframe>
</div>

JS：（将它放在</body>之间的closong <scripe type="text/javascript"></scripe>标签之前

window.onload = function() {
    var show = document.getElementById('show'),
        el = document.getElementById('straddle'),
        close = document.getElementById('close');
    show.onclick = function() {
        el.style.display = 'block';
        return false;
    };
    close.onclick = function(){
        el.style.display = 'none';
    };
};

更新：添加了相关的css

#straddle{ display:none; }
#close{
    float:right;
    cursor:pointer;
    display:inline-block;
}

如何使用两个不同的链接显示和隐藏div

3 个答案: