I am facing an issue with my code. I have written a JavaScript function that enables moving to the next tab when clicking on tabs, but I also want to move to the next tab when clicking on a specific button. The script works as expected, except for one problem - when I click on the "Next" button in a dynamic tab, the page refreshes and takes me back to the initial tab. I need help resolving this issue. (The script works fine on an HTML page, but I am running it on an ASPX page)
In the attached image, you can see my dynamic tabs. I would like to move from section A to section B by clicking a button on section A.
Here is my code:
<script type="text/javascript>
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
$(".btn-style").click(function () {
var target = $(".nav-tabs li.active");
var sibbling;
if ($(this).text() === "Next") {
sibbling = target.next();
} else {
sibbling = target.prev();
}
if (sibbling.is("li")) {
sibbling.children("a").tab("show");
}
});
});
You can use a button like this:
<button class="btn-style" type="submit">Next</button>