点击按钮应该移动到jquery中的不同标签

在此先感谢，实际上我有不同的选项卡，它会在单击选项卡时导航到不同的内容。但我在底部有一个Next按钮，当我每次点击按钮时，它应该导航到不同的标签如何工作。我的如下点击按钮应该移动到jquery中的不同标签

<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>

来源

2017-03-03 Ragith Thomas

将代码包装在文档就绪处理程序中，即$（function（）{// Your code}）' – Satpal

简单的步骤

1码）首先找到当前活动标签

2）从目前的标签，找到下一个标签，并单击事件触发它

3）如果当前标签是最后一个标签隐藏下一个按钮

$(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>

来源

2017-03-03 09:33:40 JYoThI

点击按钮应该移动到jquery中的不同标签

回答

相关问题