Question

我有一个脚本，它有三个按钮，点击时显示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-->

css part：

#contactSupportForm{
    display: none;
}

#contactBusinessForm{
    display: none;
}

#contactOtherForm{
    display: none;
}

这是一个JSFiddle来展示它如何工作的整个过程。 http://jsfiddle.net/m0jdv6u0/3/

Answer 1

你可以试试这个：

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上设置显示，但我认为您不需要...

希望它有所帮助！

Answer 2

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

[注意 - 这与@ Cleversou的答案没有太大区别]

＆＃13;

function showForm(elemId){
    var arr = ["Other", "Business", "Support"] ;
    for(var i = 0; i < arr.length; i++){
        if(elemId === "contact" + arr[i] + "Form"){
            document.getElementById(elemId).style.display = "block";
        } else {
            document.getElementById("contact" + arr[i] + "Form").style.display = "none";
        }
    }
}

＆＃13;

#contactSupportForm{
	display: none;
}

#contactBusinessForm{
	display: none;
}

#contactOtherForm{
	display: none;
}

＆＃13;

<!-- SUPPORT CONTACT FORM START-->
    			<div class="contactSupportButton"><input type="button" src=".png" alt="contact support button" style="height: 40px; width: 120px" onClick="showForm('contactSupportForm')"/>
    					<div id="contactSupportForm">
    						TEST
    					</div>
    				</div>
    			
    			<script type="text/javascript">
    				
    			</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="showForm('contactBusinessForm')"/>
    					<div id="contactBusinessForm"> 
    						TEST
    					</div>
    				</div>
    				
    			<script type="text/javascript">
    				
    			</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="showForm('contactOtherForm')"/>
    					<div id="contactOtherForm">
    						TEST
    					</div>
    				</div>
    				
    			<script type="text/javascript">
    				
    			</script>
    			<!-- OTHER CONTACT FORM ENDING-->

＆＃13;

按住按钮点击div

2 个答案: