Javascript 从a href隐藏/显示DIV

我有一个包含谷歌地图的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（没有包括在内，因为不需要）

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>

功能切换（id）{
var state=document.getElementById（id）.style.display；
如果（状态=='block'）{
document.getElementById（id）.style.display='none'；
}否则{
document.getElementById（id）.style.display='block'；
}
}

我换了一块&周围没有，仍然没有欢乐

怎么可能呢

---

我确实使用了submit按钮，但我有更多的代码使用submit按钮将表单更新到我的db，每次我单击Show/Hide div它都会上载数据，所以我尝试这样做，除非你可以在一个页面上有多个submit？

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

#showmap {
    display: none;
}

---

默认情况下，div的样式显示设置为block，因此当页面按现在的方式加载时，它将始终显示。最好将“显示”属性设置为“无”

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

---

但是，通过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>

$（文档）.ready（函数（）{
切换（“映射”）；
})
功能切换（id）{
var state=document.getElementById（id）.style.display；
如果（状态=='block'）{
document.getElementById（id）.style.display='none'；
}否则{
document.getElementById（id）.style.display='block'；
}
返回false；
}
#映射{显示：无}

或

$（文档）.ready（函数（）{
$（“#映射”）.toggle（）；
})

但是最好的方法是使用css进行隐藏（初始）

---

注意使用

的方式返回false，最初使用CSS将其隐藏。如果您等待JS处理，它可能会在隐藏之前“闪烁”。您已将此问题标记为“jQuery”，但您的代码是原生JS。您是在寻找jQ实现还是标记错误？感谢所有的回复，我已经设法在页面加载时隐藏了div，但是当我单击按钮显示div时，它会闪烁，因为我看到小favicon移动，但div没有打开。我通过回复尝试了每个选项

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

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