Question

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

<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>

我已经交换了块和＆amp;没有人，仍然没有快乐，

怎么可能？

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

Answer 1

您可以在初始页面加载时使用CSS隐藏元素：

#showmap {
    display: none;
}

Answer 2

div默认情况下将样式显示设置为阻止，因此在页面加载时将始终显示它。最好将display属性设置为none

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

或者您可以在加载页面时在javascript中设置

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

但是用css做这件事就是去这里的方法。

Answer 3

最好使用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进行隐藏（初始）注意以你的使用方式返回虚假

从href隐藏/显示DIV

3 个答案: