zoukankan      html  css  js  c++  java
  • Tab切换效果的实现

    <!--引用jquery和bootstrap-->
    <link rel="stylesheet" href="~/Content/bootstrap.min.css">
    
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    
    <div>
        <!--上面的导航栏用ul来做-->
        <ul class="nav nav-tabs">
            <!--a标签的href设置为"#目标tab的id"-->
            <!--设置tab1处于激活状态,一开始展现tab1-->
            <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
            <li><a href="#tab2" data-toggle="tab">tab2</a></li>
            <li><a href="#tab3" data-toggle="tab">tab3</a></li>
        </ul>
        <!--tab-content  将所有tab放入其中-->
        <div class="tab-content">
            <!--tab1-->
            <!--设置tab1的id-->
            <div class="tab-pane fade in active" id="tab1">
                <div class="row margin-bottom-5">
                    <div class="col-xs-6">
                        <div class="page-head">
                            <div class="page-title">
                                <h1>
                                    <span>Tab1</span> <small>tab1</small>
                                </h1>
                            </div>
                        </div>
                    </div>
                </div>
                <h1>这里是Tab1</h1>
            </div>
            <!--tab2-->
            <!--设置tab2的id-->
            <div class="tab-pane fade " id="tab2">
                <div class="row margin-bottom-5">
                    <div class="col-xs-6">
                        <div class="page-head">
                            <div class="page-title">
                                <h1>
                                    <span>Tab2</span> <small>tab2</small>
                                </h1>
                            </div>
                        </div>
                    </div>
                </div>
                <h1>这里是Tab2</h1>
            </div>
            <!--tab3-->
            <div class="tab-pane fade " id="tab3">
                <div class="row margin-bottom-5">
                    <div class="col-xs-6">
                        <div class="page-head">
                            <div class="page-title">
                                <h1>
                                    <span>Tab3</span> <small>tab3</small>
                                </h1>
                            </div>
                        </div>
                    </div>
                </div>
                <h1>这里是Tab3</h1>
            </div>
        </div>
    </div>
  • 相关阅读:
    mysql性能分析工具
    vim使用大全
    Vue computed属性
    模板题 + KMP + 求最小循环节 --- HDU 3746 Cyclic Nacklace
    Greedy --- HNU 13320 Please, go first
    DFS --- HNU 13307 Galaxy collision
    HNU 13308 Help cupid
    Linux
    dp
    2015 Multi-University Training Contest 2 1006 Friends
  • 原文地址:https://www.cnblogs.com/Lulus/p/7873778.html
Copyright © 2011-2022 走看看