当前位置：网站首页 > IT知识 > 正文

bootstrap的tab标签页的使用

liuian 2024-12-11 15:43 60 浏览

标签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 label

上一篇：Psutil + Flask + Pyecharts + Bootstrap 开发动态可视化系统监控
下一篇：前端程序员不得不爱的bootstrap

相关推荐

miui下载miui官网手机版（小米miui下载官网手机版）: 1.打开手机浏览器，输入miui官网地址。2.点击下载页面，选择你手机的型号。3.点击下载，下载完成后双击安装。4.安装完成后，重新启动手机。小米官网下载地址是：http://www.mi.com/s...

win10任务管理器被禁用怎么解除: 1.首先，检查是否有管理员权限，只有管理员有权限禁用任务管理器；2.查看任务管理器是否被禁用，可以在注册表中查看，路径为"HKEY_CURRENT_USER\Software\Micros...

flash player有必要安装吗（flash播放器有必要安装吗）: 现代的电脑不再需要安装AdobeFlashPlayer，因为许多主流浏览器已经停止对Flash的支持。FlashPlayer是用于播放动画、视频和音频等多媒体内容的插件，但由于安全性问题和技术发...

cmlink欧洲（欧洲联通）: cmlink是一种用于创建和管理内容链接的工具。它可以帮助用户将不同的内容链接在一起，形成一个完整的内容体系，方便用户查看和使用。cmlink可以将多个不同的内容链接整合在一起，形成一个自定义的内容库...

window7截图快捷键（winds7截图快捷键）: win7的截图快捷键如下：1、按Prtsc键截图　　这样获取的是整个电脑屏幕的内容，按Prtsc键后，可以直接打开画图工具，接粘贴使用。也可以粘贴在QQ聊天框或者Word文档中，之后再选择保存即可...

万能网卡驱动下载离线版（万能网卡驱动离线版pc win10）: 使用驱动精灵在没有网络的情况下安装驱动，需要安装驱动精灵万能网卡版。安装驱动精灵万能网卡版步骤如下所示：1、点击搜索结果词条，进入驱动精灵官网。2、在驱动精灵官网，选择驱动精灵万能网卡版，点击下载。3、下载完成后，点击安装驱动精灵万能网卡版...; 2025-12-20 16:05 liuian

win10 1803版本（window10版本1803）: Windows10version1803版本，也就是“April2018Update”。Win101803正式版版本号为Build17134，资料显示，Build17134即Vers...

资源管理器停止黑屏怎么恢复: 作为临时对策，重启“explorer.exe”即可，步骤如下：ctrl+alt+delete，调出任务管理器；选择“进程”，找到“explorer.exe”，结束进程；选择“文件”，之后新建“expl...

win10企业版激活密钥大全（windows10企业版激活密钥在哪）: 详细版本号：点击开始——设置——系统——关于。查看密钥：右键点击开始——运行，输入regedit确定。打开注册表编辑器。依次打开：HKEY_LOCAL_MACHINE/SOFTWARE/Micro...

路由器基本设置（路由器基本设置方法）: 如何设置路由器？设置路由器并不是很复杂的事情，并且需要设置地方也很少，一般保持默认即可；并且在设置方式上，也不一定使用电脑设置，任何移动终端接入路由器都可以完成设置。一起来看看，究竟该如何设置路由器吧...

迅雷破解版安卓（迅雷破解版安卓版6.0）: 去其他电影网站下载屏蔽的那些网站比较正规，现在越来越注重版权了虽然迅雷5.0和皮皮播放器，PPlive中可以修改SP3最大连接数，但是只能对其软件本身有效，而无法对系统和其他软件的最大连接数进行修改...

win7简约主题（windows7主题）: 要设置小米手机的全局主题为简约风格，首先进入手机的主题设置界面，选择简约风格的主题并进行下载和安装。接着在桌面设置中调整图标样式、字体和壁纸等元素为简约风格。还可以在系统设置中调整通知栏、锁屏和系统界...

win在键盘上是哪个键（键盘上的win键在哪儿）: 在大多数计算机键盘上，Win键是指Windows键，它通常位于键盘的底部，靠近空格键和Ctrl键之间。Win键上通常有Windows徽标，它是微软Windows操作系统的标志。通过按下Win键，可以打...

电脑找不到无线网络连接（电脑找不到无线网络连接图标）: 1、进入系统按win+i打开Windows设置，点击“个性化”。2、点击“任务栏”-“打开或关闭系统图标”。3、我们可以查看到“网络”开关被关闭了，点击开关将其打开即可。5、返回桌面可以看到任务栏右侧就会显示网络图标了，点击wifi图标即可...; 2025-12-20 12:05 liuian

wifi突然不可上网怎么解决（wifi突然不能上网怎么办）: 一、确认是否只有自己无法上网，看看是不是上联的外网断了。二、确认wifi的密码是否被修改。1、打开手机设置，选择“Wi-Fi”。然后，看到当前已经连接上的那个wifi信号，点击最右边的那个蓝色圆圈小箭头。2、点击“忽略此网络”。然后，手机的...; 2025-12-20 11:55 liuian

一周热门

最近发表

首页
收录
顶部