使用 Javascript 切换标签而不重新加载答案

【问题标题】：Switch Tabs without Reloading Using Javascript使用 Javascript 切换标签而不重新加载
【发布时间】：2018-07-01 10:47:42
【问题描述】：

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

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>

【问题讨论】：

submit 类型的输入元素的默认行为是发送一个休息请求，这将重新加载页面。如果您不希望这种行为，您应该使用常规按钮而不是表单输入。

标签： javascript html reload

【解决方案1】：

您可以使用 XMLHttpRequest (Ajax) 请求从 post 表单中获取数据并呈现数据。

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

因为您使用“提交”类型的按钮，所以默认情况下，当您单击它时会发送一个请求。我不确定你到底想达到什么目的，但有两种方法：

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

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

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

    // your custom functions here
});

【讨论】：