切換標簽而無需使用Java腳本重新加載

Question

我在頁面上有3個標簽。 此選項卡切換Java語言。 我已經將第一個選項卡設置為“默認打開”。....我單擊“第二個選項卡是一些文本和提交”按鈕。.我單擊“提交”按鈕，它打開了第一個選項卡。請給我示例代碼。 這是我的代碼在這里...

 function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " active"; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); 

 body { font-family: Arial; } .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } 

 <p>Click on the buttons inside the tabbed menu:</p> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div> <div id="London" class="tabcontent"> <h3>London</h3> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Paris is the capital of France.</p> <form method="post"> <input type="submit" value="submit"> </form> </div> <div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo is the capital of Japan.</p> <form method="post"> <input type="submit" value="submit"> </form> </div> 

Answer 1

您可以使用XMLHttpRequest（Ajax）Request從帖子表單獲取數據並呈現數據。

window.onload = function() {
        Array.from(document.querySelectorAll('form')).map(function(form) {
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                var xhr = new XMLHttpRequest();
                var params = "Key1=value1&key2=vakue2";
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            console.log(xhr.responseText);
                        } else {
                            console.log("Error", xhr.statusText);
                        }
                    }
                }
                xhr.open(this.method, this.action, true);
                xhr.send(params);
            });
        });
    };

Answer 2

這是因為提交表單頁面后，頁面會重新加載，並將選項卡返回到默認的第一個選項卡。

您可以通過ajax處理/提交表單，以防止頁面重新加載。 像下面這樣。

document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();

    // code for ajax from submission 
})

因此，完整的Javascript代碼應如下所示

    <script>
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }

    // Get the element with id="defaultOpen" and click on it
    document.getElementById("defaultOpen").click();

    // Prevent Page Loading and Submit From By Ajax
    document.querySelector('form').addEventListener('submit', function(e) {
        e.preventDefault(); // prevent default form action

        // code for ajax form submission 
    });
</script>

Answer 3

因為您使用的是“提交”類型的按鈕，所以默認情況下，當您單擊請求時將發送請求。 我不確定您到底要達到什么目標，但是有兩種方法：

1：將“提交”類型更改為“按鈕”類型的按鈕。 （將不發送表格數據）。

2：通過添加表單“ submit”事件的事件監聽器來停止提交按鈕的默認行為，然后手動處理請求和應用程序流程。 例如：

const form = document.querySelector(“#yourFormID”)
form.addEventListener(“submit”, function(event) {
    event.preventDefault(); // this will stop the default behaviour

    // your custom functions here
});