JS实现Bootstrap中的Nav自动轮播切换

最新推荐文章于 2023-05-27 10:48:08 发布

良心有约

最新推荐文章于 2023-05-27 10:48:08 发布

阅读量542

点赞数

分类专栏：前端插件文章标签： Bootstrap Nav 自动切换

良心有约

本文链接：https://blog.csdn.net/u010164507/article/details/109321981

版权

前端插件专栏收录该内容

22 篇文章 1 订阅

订阅专栏

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" data-toggle="tab">title1</a></li>
    <li><a href="#liangxin2" 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">
<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>