bootstrap动态切换导航按钮的active属性就实现

最新推荐文章于 2025-04-23 22:33:09 发布

5024

最新推荐文章于 2025-04-23 22:33:09 发布

阅读量3.3w

点赞数 1

文章标签： css bootstrap html

本文链接：https://blog.csdn.net/m0_37771093/article/details/80529969

版权

在网上找了半天怎么动态切换导航，偶然发现bootstrap实现方法，bootstrap框架真的很强大，直接用能省不少时间,菜鸟教程很不错，在上面找到点击打开链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 </title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#zero" data-toggle="tab">
            英语
        </a>
    </li>
    <li>
        <a href="#first" data-toggle="tab">语文</a>
    </li>
    <li>
        <a href="#second" data-toggle="dropdown">数学
            <b class="caret"></b></a>

        <ul class="dropdown-menu">
            <li><a href="#s_1" tabindex="-1" data-toggle="tab">高数</a></li>
            <li><a href="#s_2" tabindex="-1" data-toggle="tab">小数</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane active" id="zero">
        <p> There is a good programer</p>
    </div>
    <div class="tab-pane fade" id="first">
        <p>学海无涯</p>
    </div>
    <div class="tab-pane fade" id="s_1">
        <p>书山有路</p>
    </div>
    <div class="tab-pane fade" id="s_2">
        <p>智勇双枪</p>
    </div>
</div>

</body>
</html>