按住按鈕點擊div

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部分：

#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的答案沒有太大區別]

 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"; } } } 

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

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