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

Question

I have 3 tabs on a page. this tab Switching in Javascript . I have already set first tab is Default Open.. So.. I Click Second Tab is some Text and Submit button..i click the submit button it open the first tab.. i really want to second tab after the submit button.. Please Give me Example for my code. this my code here...

 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

You can use XMLHttpRequest (Ajax) Request to get data from post form and render data.

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

This is because after submitting form page reloads and tabs back to default first tab.

You can handle/submit the form by ajax to prevent page reload. Something like following.

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

    // code for ajax from submission 
})

So your full Javascript code should be like following

    <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

Because you use buttons of type “submit”, a request will be send when you click on it, by default. I'm not sure what exactly you are trying to achive, but there are two ways:

1: change type “submit” to button of type “button”. (Forms data will not be send).

2: stop submit buttons default behaviour, by adding a eventlistener for form “submit” events and then manually handle the requests and flow of your application. For example:

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

    // your custom functions here
});