[英]Switch Tabs without Reloading Using Javascript
我在页面上有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>
您可以使用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); }); }); };
这是因为提交表单页面后,页面会重新加载,并将选项卡返回到默认的第一个选项卡。
您可以通过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:通过添加表单“ submit”事件的事件监听器来停止提交按钮的默认行为,然后手动处理请求和应用程序流程。 例如:
const form = document.querySelector(“#yourFormID”)
form.addEventListener(“submit”, function(event) {
event.preventDefault(); // this will stop the default behaviour
// your custom functions here
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.