on clicking the button should move to different tabs in jquery

Question

Thanks in advance, Actually i have different tabs which will navigate to different content on clicking the tab. But i have a Next button at the bottom , when i am hitting the button on each time it should navigate to different same like how tab is working. My code as below

<html>
<head>
  <title></title>
  <script src="jquery.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>

$(".nav-tabs li a[data-toggle=tab]").on("click",function(e){
      e.preventDefault();
    //return false;
        $('.nav-tabs li:eq(1) a').tab('show');

        $("[class='btn btn-large btn-block btn-success disabled']").removeClass("btn btn-large btn-block btn-success disabled");
        $('.nav-tabs li:eq(1) a').addClass("btn btn-large btn-block btn-success disabled");

});

</script>
</head>
<body>


  <ul class="nav nav-tabs">
                        <li class="active"><a href="#home" data-toggle="tab" >Home</a></li>
                        <li><a href="#profile" data-toggle="tab">Profile</a></li>
                        <li><a href="#messages" data-toggle="tab">Messages</a></li>
                        <li><a href="#settings" data-toggle="tab">Settings</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="home">Write Here Tab Home Part</div>
                    <div class="tab-pane" id="profile">Write Here Tab Profile Part</div>
                    <div class="tab-pane" id="messages">Write Here Tab Messages Part</div>
                    <div class="tab-pane" id="settings">Write Here Tab Settings Part</div>
                </div>
                <hr />
                <button class="tab-button" type="submit">Next</button>

</body>
</html>

Answer 1

simple steps

1) First find the currently active tab

2) From the current tab to find next tab and trigger it with click event

3) And if the current tab is last tab hide the next button

 $(document).ready(function(){ $(".nav-tabs li a[data-toggle=tab]").on("click",function(e){ e.preventDefault(); if($(this).parent('li').is(':last-child')) { $('.tab-button').hide(); } else { $('.tab-button').show(); } $('.nav-tabs li:eq(1) a').tab('show'); $("[class='btn btn-large btn-block btn-success disabled']").removeClass("btn btn-large btn-block btn-success disabled"); $(this).addClass("btn btn-large btn-block btn-success disabled"); }); $('.tab-button').click(function(){ ss = $("[class='btn btn-large btn-block btn-success disabled']").parent('li').next().find('a').trigger('click'); }); });

 <html> <head> <title></title> <script src="jquery.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <body> <ul class="nav nav-tabs"> <li class="active"><a href="#home" data-toggle="tab" class="btn btn-large btn-block btn-success disabled" >Home</a></li> <li><a href="#profile" data-toggle="tab">Profile</a></li> <li><a href="#messages" data-toggle="tab">Messages</a></li> <li><a href="#settings" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="home">Write Here Tab Home Part1</div> <div class="tab-pane" id="profile">Write Here Tab Profile Part2</div> <div class="tab-pane" id="messages">Write Here Tab Messages Part3</div> <div class="tab-pane" id="settings">Write Here Tab Settings Part4</div> </div> <hr /> <button class="tab-button" type="button">Next</button> </body> </html>

on clicking the button should move to different tabs in jquery

Question

1 answers

solution1
1 2017-03-03 09:33:40

on clicking the button should move to different tabs in jquery

Question

1 answers

solution1 1 2017-03-03 09:33:40

solution1
1 2017-03-03 09:33:40