zoukankan      html  css  js  c++  java
  • 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 是设置不同的动画...
  • 相关阅读:
    暑假团队学习第一周
    Python快速入门(3)
    Python快速入门(2)
    走入PHP-类与对象
    走入PHP-declare、ticks、encoding、include
    走入PHP-变量、运算符
    XAMPP安装报错及解决
    走入PHP-数据类型和字符串语法
    走入PHP-初次见面
    剑指offer-替换空格
  • 原文地址:https://www.cnblogs.com/wangqian888/p/13679940.html
Copyright © 2011-2022 走看看