リンクBootsrapタブ（前へ次へ）

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <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.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <ul class="nav nav-tabs"> 
 
    <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li> 
 
    <li><a data-toggle="tab" href="#tab2">Tab 2</a></li> 
 
    <li><a data-toggle="tab" href="#tab3">Tab 3</a></li> 
 
    <li><a data-toggle="tab" href="#tab4">Tab 4</a></li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
    <div id="tab1" class="tab-pane fade in active"> 
 
     <h3>Tab 1</h3> 
 
     <p>This is Tab 1</p> 
 
    </div> 
 
    <div id="tab2" class="tab-pane fade"> 
 
     <h3>Tab 2</h3> 
 
     <p>This is Tab 2</p> 
 
    </div> 
 
    <div id="tab3" class="tab-pane fade"> 
 
     <h3>Tab 3</h3> 
 
     <p>This is Tab 3</p> 
 
    </div> 
 
    <div id="tab4" class="tab-pane fade"> 
 
     <h3>Tab 4</h3> 
 
     <p>This is Tab 4</p> 
 
    </div> 
 
    </div> 
 
</div>     
 
    <ul class="pager"> 
 
    <li><a href="#">Previous</a></li> 
 
    <li><a href="#">Next</a></li> 
 
    </ul> 
 
</div> 
 

 
</body> 
 
</html>

あなたは、ブートストラップのタブにポケットベルをリンクする方法任意のアイデアを持っていますか？ページャ（Previous & Next）はアクティブなタブから次のタブまたは前のタブに移動する必要がありますか？ユーザーがタブ3にあり、各タブにデータフィールドがあるとすると、ユーザーがこれらのフィールドを埋めると、「次へ」はタブ4を続けることができるはずで、そうでなければ「次へ」リンクを無効にする必要があります。

出典

2017-10-05 YMA981

の組み合わせを使用しますか？ – madalinivascu

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <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.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li> 
    <li><a data-toggle="tab" href="#tab2">Tab 2</a></li> 
    <li><a data-toggle="tab" href="#tab3">Tab 3</a></li> 
    <li><a data-toggle="tab" href="#tab4">Tab 4</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div id="tab1" class="tab-pane fade in active"> 
     <h3>Tab 1</h3> 
     <p>This is Tab 1</p> 
    <ul class="pager"> 

    <li><a href="#tab2">Next</a></li> 
    </ul> 
    </div> 
    <div id="tab2" class="tab-pane fade"> 
     <h3>Tab 2</h3> 
     <p>This is Tab 2</p> 
<ul class="pager"> 
    <li><a href="#tab1">Previous</a></li> 
    <li><a href="#tab3">Next</a></li> 
    </ul> 
    </div> 
    <div id="tab3" class="tab-pane fade"> 
     <h3>Tab 3</h3> 
     <p>This is Tab 3</p> 
<ul class="pager"> 
    <li><a href="#tab2">Previous</a></li> 
    <li><a href="#tab4">Next</a></li> 
    </ul> 
    </div> 
    <div id="tab4" class="tab-pane fade"> 
     <h3>Tab 4</h3> 
     <p>This is Tab 4</p> 
<ul class="pager"> 
    <li><a href="#tab3">Previous</a></li> 
    </ul> 
    </div> 
    </div> 
</div>     

</div> 

</body> 
</html>

出典

2017-10-05 05:16:06 dev

あなたはjavascriptのあるnext()/prev()とtab('show')

$('.prev').click(function(){ 
 
    $('.nav-tabs .active').prev().tab('show');//get the next tab and show it 
 
}); 
 

 
$('.next').click(function(){ 
 
    $('.nav-tabs .active').next().tab('show'); 
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <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.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <ul class="nav nav-tabs"> 
 
    <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li> 
 
    <li><a data-toggle="tab" href="#tab2">Tab 2</a></li> 
 
    <li><a data-toggle="tab" href="#tab3">Tab 3</a></li> 
 
    <li><a data-toggle="tab" href="#tab4">Tab 4</a></li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
    <div id="tab1" class="tab-pane fade in active"> 
 
     <h3>Tab 1</h3> 
 
     <p>This is Tab 1</p> 
 
    </div> 
 
    <div id="tab2" class="tab-pane fade"> 
 
     <h3>Tab 2</h3> 
 
     <p>This is Tab 2</p> 
 
    </div> 
 
    <div id="tab3" class="tab-pane fade"> 
 
     <h3>Tab 3</h3> 
 
     <p>This is Tab 3</p> 
 
    </div> 
 
    <div id="tab4" class="tab-pane fade"> 
 
     <h3>Tab 4</h3> 
 
     <p>This is Tab 4</p> 
 
    </div> 
 
    </div> 
 
</div>     
 
    <ul class="pager"> 
 
    <li><a href="#" class="prev">Previous</a></li> 
 
    <li><a href="#" class="next">Next</a></li> 
 
    </ul> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-10-05 05:18:23 madalinivascu

リンクBootsrapタブ（前へ次へ）

答えて

関連する問題