一个完整的BootStrap的Tab切换示例

最新推荐文章于 2022-02-14 21:38:22 发布
最新推荐文章于 2022-02-14 21:38:22 发布
阅读量841 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43144825/article/details/119001785
版权

一个完整的BootStrap的Tab切换示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"  rel="stylesheet"/>
    <script src="../../lib/js/jquery.min.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

</head>
<body>
<div>
    <ul class="nav nav-tabs">
        <li class="active" ><a href="#tab1" data-toggle="tab">第一个TAB</a></li>
        <li><a href="#tab2" data-toggle="tab">第二个TAB</a></li>
    </ul>
    <div class="tab-content">
        <div id="tab1" class="tab-pane fade in active"><h3>tab-1</h3></div>
        <div id="tab2" class="tab-pane fade"><h3>tab-2</h3></div>
    </div>
</div>
</body>
</html>
李_某人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap的tab例子
qq_27009517的博客
07-15 487
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
基于Bootstrap实现tab标签切换效果
11-24
本文实例为大家分享了Bootstrap实现tab标签切换效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> [removed][removed] <script type="text/javascript" src="js/bootstrap.m
bootStrap实现tab页切换
热门推荐
Room
09-28 7万+
bootStrap可以简单方便的实现tab页面的切换 用法 通过data属性 可以无需写任何JavaScript来激活标签式或圆角式的导航, 只需在元素上简单的指定 data-toggle=”tab” 或 data-toggle=”pill”. 在标签 ul 添加 nav 和 nav-tabs 属性, 将应用Bootstrap标签样式. <ul class="nav nav-tabs">
Bootstrap——设置Tab标签切换
aiyizou6070的博客
08-06 915
最近一个小项目需要用Tab标签切换显示不同div内容，用到了Bootstrap里面的东西，但是在Bootstrap3教程里却没有找到对应的代码，这里记录一下，方便以后快速查阅学习。 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
BootStrap之标签页切换
席木木的博客
02-14 5432
标签页切换标签页切换标签页插件第一个官方例子调用tab("show")显示tab-pane中的内容第一个例子的HTML+CSS代码fade in效果函数介绍前提条件：data-target/href数据指向设置tab("show")函数-显示内容查看事件响应的新旧对象 标签页切换     标签页切换，就是通过点击菜单/选项卡中的文字标签，使其达到局部内容更换的效果。以下给出标签页切换的最简化代码实现。 <!DOCTYPE html> <html&gt
Bootstrap实现的标签页内容切换显示效果示例
08-30
Bootstrap 提供了一个插件 Tab，可以轻松实现标签页内容切换显示效果。 在该示例中，我们使用 Bootstrap 的 Tab 插件来实现标签页内容切换显示效果。首先，我们需要引入 Bootstrap 的 CSS 和 JavaScript 文件，然后...
bootstrap tab.zip_bootstrap tab_bootstrap tab_bootstrap 多tab_bo
09-15
Bootstrap 框架是网页开发中的一个流行工具，它提供了丰富的预定义样式、组件和JavaScript插件，大大简化了响应式网页设计的工作。在给定的压缩包 "bootstrap tab.zip" 中，我们可以看到一系列与Bootstrap选项卡...
bootstrap tab插件 带有示例
09-24
在压缩包中的`index.html`文件，你可以找到一个完整的示例，展示了如何在实际项目中运用这些概念。而`theme`文件可能包含自定义的主题样式，用于改变Tab插件的外观。 通过实践这个示例，你将更好地理解如何利用...
Bootstrap选项卡动态切换效果
11-28
`data-toggle="tab"`属性告诉Bootstrap这是一个选项卡链接。在`<div class="tab-content">`内，`<div class="tab-pane">`表示选项卡的内容区域，`id`与选项卡链接的`href`相匹配。 JavaScript部分，可能包含如下...
bootstrap vue.js实现tab效果
10-20
Bootstrap Vue.js 实现 Tab 效果的知识点主要...通过上述知识点的总结，可以构建一个基于 Bootstrap Vue.js 的 Tab 组件，并在实际项目中通过合理的文件组织、依赖管理和代码编写来实现动态、响应式的 Tab 切换功能。
bootstrap实现tab选项卡切换
10-14
主要为大家详细介绍了bootstrap实现tab选项卡切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap编辑的tab标签切换
12-25
bootstrap编辑的tab标签切换 可用 简单 供参考
BootStrap中Tab页签切换实例代码
01-19
关于$().tab()一般用来实现标签页和胶囊链接内容片段的切换，或是相关内容的页面导航： <ul class=nav id=myTab> <li class=active><a>Home</a></li> <li><a>Profile</a></li> <li><a>Messages</a></li> <li><a>Settings</a></li> </ul> <div class=tab-content> <div class=
bootstrap-table示例
赶路人儿
06-17 1201
废话不多说，先上一个基本示例，然后逐步介绍功能和配置。 1、远程加载列表数据： 1）引入库： <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/boot
bootstrap标签tab切换
weixin_30417487的博客
10-30 1436
<ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#home">Home</a></li> <li><a href="#profile">Profile</a></li> ...
bootstrap-tab切换
peace120的博客
12-09 203
Bootstrap 实例 - 标签页（Tab）插件 W3Cschool Home iOS Java jmeter ejb ...
bootstrap tab切换功能
EstherNi的博客
06-15 2336
bootstrap tab切换功能
bootstrap竖向tab切换
最新发布
02-19
Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发者快速构建响应式网页。在Bootstrap中，Tab切换是一种常见的交互方式，可以让用户在不同的选项卡之间进行切换。 要实现竖向的Tab切换，可以借助Bootstrap的Navs组件和Tabs组件。下面是一个简单的示例代码： ```html <div class="container"> <div class="row"> <div class="col-md-3"> <ul class="nav nav-pills flex-column" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">Tab 1</a> </li> <li class="nav-item"> <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">Tab 2</a> </li> <li class="nav-item"> <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3" aria-selected="false">Tab 3</a> </li> </ul> </div> <div class="col-md-9"> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab"> Content for Tab 1 </div> <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="tab2-tab"> Content for Tab 2 </div> <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="tab3-tab"> Content for Tab 3 </div> </div> </div> </div> </div> ``` 在上面的代码中，我们使用了`nav`和`tab-content`两个组件来实现Tab切换。`nav`组件用于显示选项卡，`tab-content`组件用于显示对应选项卡的内容。 首先，我们创建一个具有`flex-column`类的`ul`元素，这样可以使选项卡垂直排列。每个选项卡都是一个`li`元素，其中的`a`元素用于触发切换。通过设置`data-toggle="tab"`属性和`href`属性来关联选项卡和对应的内容。 然后，我们创建一个具有`tab-content`类的`div`元素，其中的每个子元素都是一个选项卡的内容。通过设置`id`属性和`aria-labelledby`属性来关联内容和对应的选项卡。 最后，我们使用Bootstrap提供的CSS类来设置选项卡和内容的样式，例如使用`active`类来标记默认显示的选项卡。 通过以上代码，我们就可以实现一个简单的竖向Tab切换效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值