使用Javascript在不重新加载的情况下切换选项卡

我在一页上有三个标签。此选项卡在Javascript中切换。我已经将第一个选项卡设置为默认打开。。所以我单击第二个选项卡是一些文本和提交按钮。我单击提交按钮打开第一个选项卡。。我真的很想在提交按钮后添加第二个选项卡。。请给我举例说明我的代码。这是我的代码

函数openCityevt，cityName{ var i，tabcontent，tablinks； tabcontent=document.getElementsByClassNametabcontent； 对于i=0；i 伦敦 巴黎 东京 伦敦 伦敦是英国的首都

巴黎 巴黎是法国的首都

东京 东京是日本的首都

---

这是因为提交表单后，页面会重新加载并将选项卡返回到默认的第一个选项卡

您可以通过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>

---

由于您使用“提交”类型的按钮，因此在默认情况下，当您单击该按钮时，将发送请求。我不确定你到底想实现什么，但有两种方法：

1：将“提交”类型更改为“按钮”类型的按钮。将不发送表单数据

2：停止提交按钮默认行为，为表单“提交”事件添加eventlistener，然后手动处理应用程序的请求和流。例如：

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

    // your custom functions here
});

---

您可以使用XMLHttpRequestAjax请求从post表单获取数据并呈现数据

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

---

提交类型的输入元素的默认行为是发送rest请求，这将重新加载页面。如果不希望出现这种行为，则应使用常规按钮而不是表单输入。