杨小杰博客(Youngxj)提供免费教程下载和网站搭建技术教程,主要分享和发布网站源码,致力创造一个高质量网络资源教程的分享平台

bootstrap无刷选项卡案例

Young小杰2018-6-8 11:48网站搭建(3)1438查询中……小标签: 网站源码 源码分享 原创

写骰子游戏是用到了无刷选项卡,源码分享给大家

 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" crossorigin="anonymous"><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script><div class="panel panel-default"> <div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">标题</h3> </div> <div class="panel-body"> <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#shouye" data-toggle="tab">首页</a></li> <li><a href="#two" data-toggle="tab">第二</a></li> <li><a href="#s" data-toggle="tab">第三</a></li> <li><a href="#f" data-toggle="tab">第四</a></li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="shouye"> 这是首页内容 </div> <div class="tab-pane fade" id="two"> 这是第二页内容 </div> <div class="tab-pane fade" id="s"> 这是第三页内容 </div> <div class="tab-pane fade" id="f"> 这是第四页内容 </div> </div> </div> </div></div>

bootstrap选项卡.jpg



发表评论:

发表评论:

  • 世界杯竞猜 Lv 1

    bootstrap4是好些

  • 小智 Lv 1

    看了bootstrap4是真的比bootstrap3好看

    • Young小杰 站长

      回复了小智:boot4更加立体,动画渲染更加好看

  • 手机扫描二维码
    阅读体验更佳