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

【问题标题】：how to display next bootstrap tab on button click如何在按钮单击时显示下一个引导选项卡
【发布时间】：2016-09-12 13:37:46
【问题描述】：

我想在单击按钮时一一显示下一个引导选项卡。现在单击按钮时仅显示第二个选项卡，因为我已经对其进行了硬编码，应该用什么代替 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>

【问题讨论】：

你想要这样的bootply.com/7xfefgP5bf 吗？

标签： jquery bootstrap-tabs

【解决方案1】：

通过使用$('.nav-tabs > .active').next('li').find('a') 选择器，您可以选择下一个选项卡并使其处于活动状态。如果未找到下一个选择器，则使第一个选项卡处于活动状态。

$(function(){

  $('#changetabbutton').click(function(e){
    e.preventDefault();
    var next_tab = $('.nav-tabs > .active').next('li').find('a');
    if(next_tab.length>0){
      next_tab.trigger('click');
    }else{
      $('.nav-tabs li:eq(0) a').trigger('click');
    }
  });
});

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

【讨论】：

【解决方案2】：

    $('#changetabbutton').click(function(e){
        e.preventDefault();
        var next = $('#mytabs li.active').next()
        next.length?
          next.find('a').click():
          $('#mytabs li a')[0].click();
    });

<!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();
            var next = $('#mytabs li.active').next()
            next.length?
              next.find('a').click():
              $('#mytabs li a')[0].click();
        });

    });
  </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>

【讨论】：

尝试快速点击“设置下一个标签”按钮！

【解决方案3】：

在 JQUery 中使用这段代码

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

【讨论】：

我只使用过它，但这只是进入第二个选项卡，但是当我点击第二个选项卡中的“设置选项卡”按钮时，它应该进入第三个选项卡，并且相同对于其他标签。

【解决方案4】：

试试这个 -

$('#changetabbutton').click(function(e) {
  e.preventDefault();
  var link = $('#mytabs .active').next().children('a').attr('href');

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

<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/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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="#fifth" 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="fourth">
      <h2>Fourth tab</h2>
    </div>
    <div class="tab-pane fade cont" id="fifth">
      <h2>Fifth tab</h2>
    </div>

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

【讨论】：

这对我有用，但是当用户在第五个选项卡上并且当他点击 setnexttab 按钮时，什么都不应该发生，他不应该被重定向到第一个选项卡
代码在到达最后一个标签后不会重定向到第一个标签。您的意思是要在单击最后一个选项卡上的下一个 btn 后重定向到第一个选项卡？

【解决方案5】：

将选项卡编号保存为变量并添加到它，或将其重置为 1，具体取决于它们所在的选项卡似乎有效。我将选项卡的 id 重命名为数字以适应此解决方案。

<!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(){
		
		var tab = 1;
		
        $('#changetabbutton').click(function(e){
            e.preventDefault();
			if(tab>4){
				tab = 1;
			}else{
				tab++;
			}
            $('#mytabs a[href="#'+tab+'"]').tab('show');
        });

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

<div class="container">

    <!-- Nav tabs -->
    <ul id="mytabs" class="nav nav-tabs" role="tablist">
      <li class="active">
          <a href="#1" role="tab" data-toggle="tab">
              <i class="fa fa-home"></i> First tab
          </a>
      </li>
      <li><a href="#2" role="tab" data-toggle="tab">
          <i class="fa fa-user"></i> Second tab
          </a>
      </li>
      <li>
          <a href="#3" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Third tab
          </a>
      </li>
      <li>
          <a href="#4" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Fourth tab
          </a>
      </li>
      <li>
          <a href="#5" 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="1">
          <h2>First tab</h2>
      </div>
      <div class="tab-pane fade cont" id="2">
          <h2>Second tab</h2>
      </div>
      <div class="tab-pane fade cont" id="3">
          <h2>Third tab</h2>
      </div>
      <div class="tab-pane fade cont" id="4">
          <h2>Fourth tab</h2>
      </div>
       <div class="tab-pane fade cont" id="5">
          <h2>Fifth tab</h2>
      </div>

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

</body>
</html>

【讨论】：