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 是設置不同的動畫...