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

bootstrap无刷选项卡案例

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

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

	 
<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更加立体,动画渲染更加好看

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