Jquery 如何在单击按钮时显示下一个引导选项卡_Jquery_Bootstrap Tabs

Jquery 如何在单击按钮时显示下一个引导选项卡

jquery

Jquery 如何在单击按钮时显示下一个引导选项卡,jquery,bootstrap-tabs,Jquery,Bootstrap Tabs,我想在单击按钮时逐个显示下一个引导选项卡。现在单击按钮时只显示第二个选项卡，因为我已对其进行了硬编码，应该用什么来代替href=“#second”如何在href中获取特定id？当我第一次单击其他选项卡而不是单击第一个处于活动状态的选项卡时，用户必须收到错误消息“用户必须单击第一个选项卡，然后再单击其他选项卡”，使用noty插件意味着禁用除页面加载时的第一个选项卡之外的其他选项卡这是我的密码 <!DOCTYPE html> <html lang="en"> <hea

我想在单击按钮时逐个显示下一个引导选项卡。现在单击按钮时只显示第二个选项卡，因为我已对其进行了硬编码，应该用什么来代替href=“#second”如何在href中获取特定id？当我第一次单击其他选项卡而不是单击第一个处于活动状态的选项卡时，用户必须收到错误消息“用户必须单击第一个选项卡，然后再单击其他选项卡”，使用noty插件意味着禁用除页面加载时的第一个选项卡之外的其他选项卡

这是我的密码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
  $(function(){

        $('#changetabbutton').click(function(e){
            e.preventDefault();

            $('#mytabs a[href="#second"]').tab('show');
        });

    });
  </script>
</head>
<body>

<div class="container">

    <!-- Nav tabs -->
    <ul id="mytabs" class="nav nav-tabs" role="tablist">
      <li class="active">
          <a href="#first" role="tab" data-toggle="tab">
              <i class="fa fa-home"></i> First tab
          </a>
      </li>
      <li><a href="#second" role="tab" data-toggle="tab">
          <i class="fa fa-user"></i> Second tab
          </a>
      </li>
      <li>
          <a href="#third" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Third tab
          </a>
      </li>
      <li>
          <a href="#fourth" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Fourth tab
          </a>
      </li>
      <li>
          <a href="#fourth" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Fifth tab
          </a>
      </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade active in cont" id="first">
          <h2>First tab</h2>
      </div>
      <div class="tab-pane fade cont" id="second">
          <h2>Second tab</h2>
      </div>
      <div class="tab-pane fade cont" id="third">
          <h2>Third tab</h2>
      </div>
      <div class="tab-pane fade cont" id="third">
          <h2>Fourth tab</h2>
      </div>
       <div class="tab-pane fade cont" id="third">
          <h2>Fifth tab</h2>
      </div>

    </div>
     <button type="button" id="changetabbutton" class="btn btn-primary ">Set next tab</button>
</div>

</body>
</html>


引导盒
$（函数（）{
$（“#changetabbutton”）。单击（函数（e）{
e、 预防默认值（）；
$（'#mytabs a[href=“#second”]'）。tab（'show'）；
});
});












第一选项卡
第二选项卡
第三选项卡
第四选项卡
第五个标签
设置下一个选项卡

在JQUery中使用此代码

$('#changetabbutton').click(function(e){
        e.preventDefault();
        $('#mytabs a[href="#second"]').tab('show');
    })

在JQUery中使用此代码

$('#changetabbutton').click(function(e){
        e.preventDefault();
        $('#mytabs a[href="#second"]').tab('show');
    })


引导盒
$（函数（）{
$（“#changetabbutton”）。单击（函数（e）{
e、 预防默认值（）；
var next=$（'#mytabs li.active'）。next（）
下一个，长度？
下一步。查找（'a'）。单击（）
$（'a'）[0]。单击（）；
});
});












第一选项卡
第二选项卡
第三选项卡
第四选项卡
第五个标签
设置下一个选项卡


引导盒
$（函数（）{
$（“#changetabbutton”）。单击（函数（e）{
e、 预防默认值（）；
var next=$（'#mytabs li.active'）。next（）
下一个，长度？
下一步。查找（'a'）。单击（）
$（'a'）[0]。单击（）；
});
});












第一选项卡
第二选项卡
第三选项卡
第四选项卡
第五个标签
设置下一个选项卡

使用

$（'.nav tabs>.active'）。下一个（'li'）。查找（'a'）选择器您可以选择下一个选项卡并将其激活。如果未找到下一个选择器，则激活第一个选项卡

$（函数（）{
$（“#changetabbutton”）。单击（函数（e）{
e、 预防默认值（）；
var next_tab=$（'.nav tabs>.active'）。next（'li'）。find（'a'）；
如果（下一个标签长度>0）{
下一个选项卡触发（“单击”）；
}否则{
$（'.nav tabs li:eq（0）a'）。触发器（'click'）；
}
});
});













第一选项卡
第二选项卡
第三选项卡
第四选项卡
第五个标签
设置下一个选项卡
使用$（'.nav tabs>.active'）。下一个（'li'）。查找（'a'）选择器您可以选择下一个选项卡并将其激活。如果未找到下一个选择器，则激活第一个选项卡

$（函数（）{
$（“#changetabbutton”）。单击（函数（e）{
e、 预防默认值（）；
var next_tab=$（'.nav tabs>.active'）。next（'li'）。find（'a'）；
如果（下一个标签长度>0）{
下一个选项卡触发（“单击”）；
}否则{
$（'.nav tabs li:eq（0）a'）。触发器（'click'）；
}
});
});













第一选项卡
第二选项卡
第三选项卡
第四选项卡
第五个标签
设置下一个选项卡
试试这个-

$（'#changetabbutton'）。单击（函数（e）{
e、 预防默认值（）；
var link=$（'#mytabs.active'）.next（）.children（'a'）.attr（'href'）；
$（'#mytabs a[href=“”+link+“]”）选项卡（'show'）；
});













第一选项卡
第二选项卡
第三选项卡
第四选项卡
第五个标签
设置下一个选项卡
试试这个-

$（'#changetabbutton'）。单击（函数（e）{
e、 预防默认值（）；
var link=$（'#mytabs.active'）.next（）.children（'a'）.attr（'href'）；
$（'#mytabs a[href=“”+link+“]”）选项卡（'show'）；
});













第一选项卡
第二选项卡
第三选项卡
第四选项卡
第五个标签
设置下一个选项卡
将标签号保存为变量，然后添加到变量中，或者将其重置为1，这取决于它们所使用的标签，这似乎是可行的。我重新命名了t的id