隐藏/显示DIV从一个href

问题描述：

我有一个包含谷歌地图的div，当页面加载时我想隐藏div直到我点击链接来查看。我的问题是div加载时总是显示。我不能为我的生活找出为什么它不会显示为隐藏，直到点击。隐藏/显示DIV从一个href

<a href="#" class="btn blue btn-block" onclick="toggle('showmap')">View on Map <i class="fa fa-map-marker"></i></a>

这是我的div持有地图（并不包括因为没有必要）

<div id="showmap"> 
</div>

的JavaScript

<script language="JavaScript"> 
    function toggle(id) { 
     var state = document.getElementById(id).style.display; 
      if (state == 'block') { 
       document.getElementById(id).style.display = 'none'; 
      } else { 
       document.getElementById(id).style.display = 'block'; 
     } 
    } 
</script>

我已经换了块&没有和周围仍然没有快乐，

这怎么可能？

我确实通过使用提交按钮工作，但我有更多的代码，使用提交按钮来更新表单到我的数据库，每次我点击显示/隐藏div上传数据，所以我试图这种方式除非你可以在页面上多次提交？

使用CSS最初隐藏它。如果您等待JS处理它，则可能会在隐藏之前“闪烁”。 –

您已将此问题标记为“jQuery”，但您的代码是原生JS。你在寻找一个jQ实现还是你错了标签？ –

答

您可以隐藏与CSS的元素初始页面加载：

#showmap { 
    display: none; 
}

感谢所有回复，当页面加载时，我设法隐藏div，但是当我点击按钮显示div时，它会闪烁通过，因为我看到小图标移动但div不打开。我已经通过回复尝试了每个选项 – 539

答

股利将有风格的显示设置默认阻止，因此会一直显示正在加载页面时，因为它是现在。最好的显示属性设置为none

<div id="showmap" style="display:none;"></div>

或者你可以将其设置在了JavaScript的网页已被加载

window.onload(function() { 
    document.getElementById("showmap").style.display = "none"; 
}

上但是，CSS做，就跑到这里的方式。

答

最好使用jQuery的，但你的代码是不工作，因为你需要在这个风格

<script language="JavaScript"> 
    $(document).ready(function(){ 
     toggle('map'); 
    }) 
    function toggle(id) { 
     var state = document.getElementById(id).style.display; 
     if (state == 'block') { 
      document.getElementById(id).style.display = 'none'; 
     } else { 
      document.getElementById(id).style.display = 'block'; 
    } 
    return false; 
} 

</script> 
<style> 
#map{display:none} 
</style>

或

<script> 
$(document).ready(function(){ 
    $('#map').toggle(); 
}) 
</script>

但是，最好的方法是使用CSS的隐藏办（初始）注意在您的使用方式中返回false false

隐藏/显示DIV从一个href

相关推荐