Bootstrap 组件---导航(选项卡导航)

本文介绍如何使用Bootstrap框架创建可交互的选项卡导航组件。通过简单的HTML结构与JavaScript插件配合,实现平滑的选项卡切换效果。文章展示了具体的代码实例,包括必要的样式表和脚本文件引用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!--使用.nav-tabs类可将将导航转换为选项卡

      如果要设置选项卡动态可切换,可以在每个链接上添加data-toggle="tab"属性,然后在每个选项对应的内容上添加.tab-pane类

      <ul class="nav nav-tabs">

        <li class="nav-item">

          <a class="nav-link" data-toggle="tab">内容</a>

        </li>

      </ul> -->

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>

    <title></title>

    <link rel="stylesheet" href="css/bootstrap.css"/>

    <script src="js/jquery.min.js"></script>

    <script src="js/popper.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

</head>

<body>

 <div class="container">

     <h1>选项卡导航</h1>

     <ul class="nav nav-tabs">

         <li class="nav-item">

            <a class="nav-link" data-toggle="tab" href="#one">选项卡1</a>

         </li>

         <li class="nav-item">

             <a class="nav-link" data-toggle="tab" href="#two">选项卡2</a>

         </li>

         <li class="nav-item">

             <a class="nav-link" data-toggle="tab" href="#three">选项卡3</a>

         </li>

     </ul>

     <!--选项卡对应的内容-->

     <div class="tab-content">

         <div class="tab-pane" id="one">

选项卡1对应的内容: Lorem </div>

         <div class="tab-pane active" id="two">

             选项卡2对应的内容:Lorem </div>

         <div class="tab-pane" id="three">

             选项卡3对应的内容:Lorem </div>

     </div>

     </div>

 <br/><br/><br/><br/><br/><br/>

</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值