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

本文主要是介绍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" 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>

 

这篇关于JS实现Bootstrap中的Nav自动轮播切换的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---