Javascript 单击按钮时隐藏div

我有一个脚本，它有三个按钮，点击时显示一个div，现在我的问题是如何隐藏这些div，让我们假设div 1被打开，我点击打开div 2，然后让它显示div 2，但隐藏div 1，这样我就可以让div处于相同的位置，但它们只在应该显示的情况下显示

我的剧本：

  <!-- SUPPORT CONTACT FORM START-->
            <div class="contactSupportButton"><input type="button" src=".png" alt="contact support button" style="height: 40px; width: 120px" onClick="showSupForm()"/>
                    <div id="contactSupportForm">
                        TEST
                    </div>
                </div>

            <script type="text/javascript">
                function showSupForm() {
                document.getElementById('contactSupportForm').style.display = "block";
                }
            </script>
            <!-- SUPPORT CONTACT FORM ENDING-->

            <!-- BUSINESS CONTACT FORM START-->
            <div class="contactBusinessButton"><input type="button" src=".png" alt="contact business button" style="height: 40px; width: 120px" onClick="showBusForm()"/>
                    <div id="contactBusinessForm"> 
                        TEST
                    </div>
                </div>

            <script type="text/javascript">
                function showBusForm() {
                document.getElementById('contactBusinessForm').style.display = "block";
                }
            </script>
            <!-- BUSINESS CONTACT FORM ENDING-->

            <!-- OTHER CONTACT FORM START-->
            <div class="contactOtherButton"><input type="button" src=".png" alt="contact other button" style="height: 40px; width: 120px" onClick="showOtherForm()"/>
                    <div id="contactOtherForm">
                        TEST
                    </div>
                </div>

            <script type="text/javascript">
                function showOtherForm() {
                document.getElementById('contactOtherForm').style.display = "block";
                }
            </script>
            <!-- OTHER CONTACT FORM ENDING-->

下面是一个JSFiddle来展示它如何工作的整个过程。 您可以尝试以下方法：

function showOtherForm(idElement) {
    document.getElementById('contactOtherForm').style.display = "none";
    document.getElementById('contactSupportForm').style.display = "none";
    document.getElementById('contactBusinessForm').style.display = "none"
    document.getElementById(idElement).style.display = "block"
}

然后调用每个传递div id的按钮，如下所示：

showOtherForm('contactOtherForm')

当然，你可以做一些验证，所以你不需要在3个div上设置显示，但我认为你不需要

---

希望有帮助

使用

类

作为选择器可能有一种更优雅的方法，可以实现相同的功能目标，但这里有一种解决方案，可以让您添加其他表单/按钮元素，而无需添加其他显示/隐藏块：

[注-这与@Cleversou的回答没有显著差异]

功能展示表单（elemId）{
var arr=[“其他”、“业务”、“支持”]；
对于（变量i=0；i

#联系人支持表单{
显示：无；
}
#contactBusinessForm{
显示：无；
}
#接触式{
显示：无；
}

试验
试验
试验

这是您想要的吗？这可以通过使用大大简化，还是您想要这样@Lal当然使用jQuery更容易，但他不应该仅仅为了使用toggle（）而添加jQuery。不管怎样，他要求一个JavaScript解决方案，由代码和问题标签表示。非常感谢您的回答，它们都以不同的方式完成了我想要的事情，尽管我选择使用JSFIDLE中的脚本Lal。

showOtherForm('contactOtherForm')