天天看點

JS實作Bootstrap中的Nav自動輪播切換

1.直接上JS

<script>
//Add by liangxin at 2020-10-27 22:34:53
    $(function () {
    var i = 0;
    	setInterval(function(){
        	if(i==5){i=0;} //Nav Count
        	$('#myTab li:eq('+i+') a').tab('show');
        	i++;
        },5000);
   
    });
</script>
           

2.Bootstrap中的Nav

<ul id="myTab" class="nav nav-tabs nav-justified">
    <li class="active"><a href="#liangxin1" target="_blank" rel="external nofollow"  data-toggle="tab">title1</a></li>
    <li><a href="#liangxin2" target="_blank" rel="external nofollow"  data-toggle="tab">title2</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="liangxin1">
      Liangxin test Content1
    </div>
   <div class="tab-pane fade in active" id="liangxin2">
      Liangxin test Content2
    </div>
</div>
           

3.必須引入的資源

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" target="_blank" rel="external nofollow" >
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
           

繼續閱讀