• bootstrap实现菜单定位


    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello World</title>
    <link href=" //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <ul class="nav nav-tabs" role="tablist" id="myTab">
    <li role="presentation" class="active"><a href="#first" aria-controls="home" role="tab" data-toggle="tab">第一项</a></li>
    <li role="presentation"><a href="#second" aria-controls="profile" role="tab" data-toggle="tab">第二项</a></li>
    <li role="presentation"><a href="#third" aria-controls="messages" role="tab" data-toggle="tab">第三项</a></li>
    <li role="presentation"><a href="#forth" aria-controls="settings" role="tab" data-toggle="tab">第四项</a></li>
    </ul>

    <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="first">哈哈哈哈哈哈</div>
    <div role="tabpanel" class="tab-pane" id="second">
    <p>互联网是做什么的?</p>
    <p>互联网技能教育,免费的哦</p>
    </div>
    <div role="tabpanel" class="tab-pane" id="third">哼哼哼哼哼哼哼哼哼</div>
    <div role="tabpanel" class="tab-pane" id="forth">嘿嘿嘿嘿嘿嘿嘿嘿嘿</div>
    </div>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#myTab a[href="#second"]').tab('show')
    });
    </script>
    </body>
    </html>

  • 相关阅读:
    Bone Collector II(背包 求第k优解)
    How Many Answers Are Wrong (彻底理解带权并查集)
    System Testing(Codeforces Round #543 (Div. 2, based on Technocup 2019 Final Round))D
    Rikka with Minimum Spanning Trees徐州区域赛a题
    cin加速语句
    牛客练习赛41 b 666RPG (01背包)
    js字符串拼接优化
    nodejs中使用递归案例
    thunk的主要用法
    $in的方法总结
  • 原文地址:https://www.cnblogs.com/family-626-77/p/5539363.html
Copyright © 2020-2023  润新知