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

切换标签，而无需使用Java脚本重新加载

3 个答案: