bootstrap4实现点击标签展示对应的内容

不多说，直接贴代码

导航

<ul class="nav nav-tabs container pr-0 pt-4 pb-4" role="tablist">

<li class="nav-item">

<a class="nav-link active" data-toggle="tab" href="#name">程序名称</a>

</li>

<li class="nav-item">

<a class="nav-link" data-toggle="tab" href="#type">程序类型</a>

</li>

 

</ul>

 

内容

<div class="tab-content container">

<div class="qw-con tab-pane active wow bounceInLeft" data-wow-delay="0.1s" id="name">

<div>这里展示内容</div>

</div>

<div class="qw-con tab-pane wow bounceInLeft" data-wow-delay="0.1s" id="type">

<div>这里展示内容</div>

</div>

</div>

 

这样就行了

 

另外说一下这里的 class=" wow bounceInLeft",,以及 属性 data-wow-delay="0.1s"；；

 

这是页面动画的使用

 

需要在 jquery,bootstrap 的 js 引入，以及 bootstrap 的 css 引入的情况下 引入 animation.css 和 wow.min.js 之后

 

在需要动画的标签里面加上 class=" wow bounceInLeft" data-wow-delay="0.1s" ，

 

然后在页面初始化一下，加入

 

var wow = new WOW({

boxClass: 'wow',

animateClass: 'animated',

offset: 0,

mobile: true,

live: true,

scrollContainer: null

});

wow.init();

 

即可。

 

PS：这里 bounceInLeft 是设置不同的动画...