我如何使導航系統為每個項目顯示不同的表單，但在同一位置顯示不同的導航項目？

Question

基本上，我試圖制作一個按鈕列表，單擊該按鈕時，它將調用一個表單並將其顯示在頁面上的某個位置，然后單擊另一個按鈕時，先前顯示的表單將消失，而新的表單將其替換。

我了解您可以通過按鈕使用：

    onClick="document.getElementbyId('form1').style.display=('inline')"

但是如何將當前顯示設置為不顯示，然后更改呢？ 我大約有25種以上的表單，因此它必須是動態的，並將當前顯示的任何表單設置為不顯示，然后將定義的表單設置為display。

希望你們能理解我正在努力實現的目標。 一個帶有一堆鏈接的列表，這些鏈接顯示不同的表單，但是我只希望一個表單同時顯示，並且都在完全相同的位置顯示。

Answer 1

Try This Code:    


<div class="menu">
    <ul>
        <li><a href="#tabs-1" id="page1" class="tab">page 1</a>

        </li>
        <li><a href="#tabs-2" id="page2" class="tab">page 2</a>

        </li>
        <li><a href="#tabs-3" id="page3" class="tab">page 3</a>

        </li>
        <li><a href="#tabs-4" id="page4" class="tab">page 4</a>

        </li>
        <li><a href="#tabs-5" id="page5" class="tab">page 5</a>

        </li>
    </ul>
</div>
<div class="contentarea" id="response"></div>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
        // load index page when the page loads
        $("#response").html("DEFAULT");
        $("#page1").click(function () {
            // load home page on click
            $("#response").html("TESTING 1");
        });
        $("#page2").click(function () {
            // load about page on click
            $("#response").html("TESTING 2");
        });
        $("#page3").click(function () {
            // load contact form onclick
            $("#response").html("TESTING 3");
        });
        $("#page4").click(function () {
            // load contact form onclick
            $("#response").html("TESTING 4");
        });
        $("#page5").click(function () {
            // load contact form onclick
            $("#response").html("TESTING 5");
        });
    });

    </script>

    <style>
    li {
    display: inline-block;
    margin-right: 2px;
}
li a {
    border: 1px solid #666;
    padding: 4px;
}

   </style>