当前位置：网站首页 > 文章教程 > 正文

bootstrap的tab标签页的使用

xsobi 2025-01-11 18:18 1 浏览

标签tab页在，当前的web中应用十分广泛，君不见，在博客的右侧出现的最新文章和随机文章中有它的身影，在大型门户网站中也有它的身影，可以说其无处不在的刷着存在感。

既然其如此嚣张的存在，我们没有理由不应用呀。

来吧。让bootstrap赐予我力量，用它来简单的，毫无压力的应用吧。

先上个某易网站的效果：

下面让我们开始吧：

1、用data属性来调用：

您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚文本链接中。
为标签页设置淡入淡出效果，添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容。
示例来了：
第一步引入css和js文件。
第二步HTML结构之页面标签：
注意，可以用ul来表示，li中a的href 一定要和下面div的id相呼应，data-toggle必须为tab。
第三步，要显示的内容：
ps：div的ID一定要和上面ul下的li的a的href对应。错不得。
搞定了，相关样式的修改，需要修改对应的css即可。

2、用JavaScript来调用：

$('#myTab a').click(function (e) {

e.preventDefault()

$(this).tab('show')})

一般情况下，我用第一种方法，不知道你怎么用？来评论告诉我？

这是click改变显示内容的，你知道如何用hover方式吗？

bootstrap使用

上一篇：使用 Bootstrap 的最简单方法 - 让你的 HTML 看起来赏心悦目
下一篇：BootstrapBlazor 模板适配移动设备使用笔记

相关推荐

bootstrap入门: bootstrap是一个前端ui框架，它把我们网页开发常用的功能都写好了，我们使用它可以像搭积木一样的轻松的开发网站，不过现在都流行前后端分析了，而且layui也比较好用，个人觉得无论哪个ui框架，我...

BootStrap简介及应用要点: BootStrap简介BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架，他是后端程序员的福音，使它们只需要专注业务逻辑，...

如何在Bootstrap Studio中使用图标字体?: BootstrapStudioforMac是一款网站设计制作工具，图标字体类似于普通的Web字体，但是它们包含矢量形状，而不是字母和数字。那么如何在BootstrapStudio中使用图标字体...

Bootstrap5.0-全球流行的前端开源UI工具包迎来了大版本更新: Bootstrap5.0正式发布了，带来了很多亮点，还学得动吗？Bootstrap介绍...

BootstrapBlazor 模板适配移动设备使用笔记: 项目模板BootstrapBlazorApp模板为了方便大家利用这套组件快速搭建项目，作者制作了项目模板（ProjectTemplates），使用dotnetnew命令行模式，使用步骤...

bootstrap的tab标签页的使用: 标签tab页在，当前的web中应用十分广泛，君不见，在博客的右侧出现的最新文章和随机文章中有它的身影，在大型门户网站中也有它的身影，可以说其无处不在的刷着存在感。既然其如此嚣张的存在，我们没有理由不应...

使用 Bootstrap 的最简单方法 - 让你的 HTML 看起来赏心悦目: 什么是BootstrapBootstrap是一个免费的开源CSS框架，使得前端Web开发变得更加简单。...

Bootstrap-table 使用总结: 一、什么是Bootstrap-table？在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这...

建议收藏:哪些电子发票有XML格式?: 报销时，财务要求提供发票XML格式。但不是所有的电子发票都有哦，目前只有数电发票（全面数字化的电子发票）有XML格式！目前的数电发票有下面这几大类：1、电子发票（增值税专用发票）：适用于增值税一般纳税...

Mybatis中mapper的xml解析详解: 上一篇文章分析了mapper注解关键类MapperAnnotationBuilder，今天来看mapper的项目了解析关键类XMLMapperBuilder。基础介绍回顾下之前是在分析configur...

word修改文中任意一处文字，其他地方相同的内容自动修改: 我们工作写方案处理word的时候，经常会遇到这么一种情况，即文中存在多处相同的文字内容，可能是词语，也可能是段落。当我们修改了其中一处后，其他地方还得手动修改，十分不便。今天给大家分享一下，在word...

第9天 | 鸿蒙App开发实战，XML创建布局，共性很重要: XML声明布局的方式更加简便直观，是开发App的核心内容之一，咱们完全有必要搞清楚。每一个Component和ComponentContainer对象大部分属性都支持在XML中进行设置，它们有各自的X...

可扩展标记语言格式XML: 1，XML（eXtensibleMarkupLanguage）：指可扩展标记语言，一种数据表示格式，被设计用来传输和存储数据，不用于表现和展示数据。2，XML和基于XML的语言的整个结构是...

比较一下JSON与XML两种数据格式?: JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是在日常开发中比较常用的两种数据格式，它们主要的作用就是用来进行数据的传...

PROFINET工业以太网教程(16)-GSDML文件详解: 前面的文章（PROFINET工业以太网教程(10)——GSD文件）我们介绍过GSD文件，它的全称是“GeneralStationDescription”，中文翻译为“通用站描述文件”。GSD文件的...

一周热门

最近发表

首页
收录
顶部