0

ボタンのクリックで次のブートストラップ タブを 1 つずつ表示したいhref?アクティブな最初のタブをクリックする代わりに最初に他のタブをクリックすると、ユーザーは「ユーザーは最初のタブをクリックしてから他のタブをクリックする必要があります」というエラーメッセージを受け取る必要があります 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>
4

5 に答える 5

0

タブ番号を変数として保存し、それに追加するか、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>

于 2016-09-12T14:01:01.850 に答える
0

このコードを JQUEry で使用する 

$('#changetabbutton').click(function(e){
        e.preventDefault();
        $('#mytabs a[href="#second"]').tab('show');
    })
于 2016-09-12T13:40:07.447 に答える