标签页（Tab）插件方法 .tab 的用法

最新推荐文章于 2024-06-26 21:25:48 发布
最新推荐文章于 2024-06-26 21:25:48 发布
阅读量2k 收藏 3
点赞数 1
分类专栏： html 文章标签： bootstrap tab页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rocling/article/details/82431722
版权 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标签页（Tab）插件方法</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="#home" data-toggle="tab">菜鸟教程</a>
	</li>
	<li><a href="#ios" data-toggle="tab">iOS</a></li>
	<li class="dropdown">
		<a href="#" id="myTabDrop1" class="dropdown-toggle" 
		   data-toggle="dropdown">Java <b class="caret"></b>
		</a>
		<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
			<li><a href="#jmeter" tabindex="-1" data-toggle="tab">
				jmeter</a>
			</li>
			<li><a href="#ejb" tabindex="-1" data-toggle="tab">
				ejb</a>
			</li>
		</ul>
	</li>
</ul>
<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade in active" id="home">
		<p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>
	</div>
	<div class="tab-pane fade" id="ios">
		<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple 
			TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>
	</div>
	<div class="tab-pane fade" id="jmeter">
		<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>
	</div>
	<div class="tab-pane fade" id="ejb">
		<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。
		</p>
	</div>
</div>
<script>
	$(function () {
		$('#myTab li:eq(1) a').tab('show');
	});
</script>

</body>
</html>

结果：

注意：script中默认IOS为首页

rocling
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
内置30+神级功能的神器WebTab（插件）
weixin_43101805的博客
05-10 909
比起hao123这种起始页，WebTab还是非常简洁的，除了一些常用网站推荐外，没啥太多花哨的网站，实用性拉满！主页的壁纸、显示风格、搜索引擎、显示的间距等都可根据自己的设备和使用习惯自己DIY，如果你使用的有一些特别小众的搜索引擎，也可自行添加，起始页中，但是自己又不喜欢的页面，可以一键删除，替换为自己常用的，用起来超级方便。如果你没有强迫症的话，拿来看看门户网站，浏览个资讯，倒是蛮不错的选择。今天，要给大家推荐的是一款以插件形式存在的起始页，需要安装后方能使用。另外，软加还加入了一些AI小工具，
Bootstrap 标签页（Tab）插件
webxscan.com
09-07 736
Bootstrap 实例 - 标签页（Tab）插件方法 菜鸟教程 iOS <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java jmeter ejb 菜鸟教
制作tab
jinjinbuliang的专栏
10-03 264
利用jquery制作简单的tab效果
新开发了一款浏览器Tab管理插件，OneTab 的升级替代品, 欢迎品尝!
最新发布
u010844210的博客
06-26 887
这是一款用来管理浏览器 Tab 标签页的浏览器插件，主要采用 React + Typescript + antd 等技术栈开发， 目前已经开源。发布插件审核被拒绝多次之后，终于成功发布了。 希望能跟大家一起探讨，期待您的宝贵建议。
5.6 Bootstrap 标签页(Tab)插件
梁辰兴的博客
07-24 2444
注意：如果您想要单独引用该插件的功能，那么您需要引用 tab.js。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。.$().tab：该方法可以激活标签页元素和内容容器。下面的实例演示了标签页（Tab）插件方法 .tab 的用法。下面的实例演示了标签页（Tab）插件事件的用法。
基于Bootstrap的标签页组件bootstrap-tab
极客神殿
08-17 7916
bootstrap-tab组件是对原生的bootstrap-tab组件的封装，方便开发者更方便地使用，主要包含以下功能： tab页初始化 关闭tab页 新增tab 显示tab页 获取tab页ID 使用 Step1 ：引入样式 1 2 3 4 Step2：引入脚本 1 2 3 Step3：使用 (&amp;amp;amp;quot;#tabContai...
$().tab() bootStrap中Tab页签切换
yang295242361的博客
12-19 3800
style type="text/css"> .tab-pane{ display: none; } .active{ display: block; } style> ul class="nav nav-tabs" id="myTab"> li class="active">a href="#home">Homea
Bootstrap标签页（Tab）插件使用方法
12-29
您可以通过以下两种方式启用标签页： 1、通过 data 属性：您需要添加 data-toggle=”tab” 或 data-toggle=”pill” 到锚文本链接中添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 ...
bootstrap-closable-tab可实现关闭的tab标签页插件
10-14
Bootstrap-Closable-Tab 是一个基于 Bootstrap 框架的插件，主要用于创建具有关闭功能的标签页。这个插件允许用户在使用过程中方便地关闭不再需要的标签页，提高用户体验。以下是对这个插件的详细说明： 1. **依赖*...
js与jquery分别实现tab标签页功能的方法.docx
01-21
本文将详细介绍如何使用原生JavaScript以及jQuery库来实现Tab标签页的功能，并对比两种方法的优缺点。 #### 二、原生JavaScript实现Tab标签页 ##### 1. HTML结构 ```html <div id="tab"> <li class="ssl">1 ...
jQuery标签页Tab选项卡切换.zip
07-05
总的来说，"jQuery标签页Tab选项卡切换"插件是一个实用的工具，它结合了jQuery的便利性和选项卡的常见需求，为网页开发者提供了一种快速创建美观且功能齐全的标签页解决方案。通过学习和应用这个插件，开发者不仅...
Tab插件使用
supermanjames的专栏
12-26 996
2.6  使用选项卡方法选项卡控件包括许多不同的方法，这意味着它具有丰富的行为。同时选项卡控件还支持更高级的函数实现，以允许采用编程方式使用它。现在来看看表2-5中所列出来的这些方法。表2-5方法用途add通过编程方式增加选项卡，并在参数中指明选项卡内容的URL、label和索引号（可选的）remove
浅析Bootstrap中Tab（标签页）的使用方法
热门推荐
皮蛋瘦肉没有肉
11-23 8万+
Bootstrap 导航元素使用相同的标记和基类，改变修饰的class，可以在不同的样式间进行切换 如".nav-pills"（胶囊式导航）与 ".nav-tabs" （标签式导航） 创建一个标签式的导航菜单： 以一个带有 class .nav 的无序列表开始。添加 class .nav-tabs。 下面的实例演示了这点： Home Profile
HTML——tab标签
最好的时光里
12-16 5万+
前言   小编最近在做项目的时候前端需要tab标签来进行角色分类，小编的公司用的是angular，虽然一般情况下angular挺好用的，但是这次例外了，angular的标签并不能良好的达到我想要的效果，于是小编找了一个html改装的tab，如下： html内容如下 &amp;lt;div class=&quot;tabs&quot;&amp;gt; &amp;lt;div class=&quot;tab-2&quot;&amp;gt
1.tab之数据格式
kylin_learn的博客
07-10 1567
Bootstrap学习笔记之插件（三）
lost_wen的博客
11-07 995
Bootstrap插件 一、模态框（Modal） data-toggle="modal" 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等 //当用超链接代替button触发时，改data-target为href="#myModal"，以识别要加载的模态框目标;data-togg
bootstrap标签页(Tab)控件js获取当前tab页
谢文峰的博客
02-26 1万+
1.说明 项目中遇到需求，需要通过按钮点击事件切换tab页面 2.解决思路 2.1 获取到当前激活的tab页 2.2 使用 tab('show') 控制tab的显示 3.源码 #evalBaseInfoTab 为tab控件id，通过以下函数可以获取到控件中第几个tab页激活 function getCurrentTabIndex(){ var $tabs = $('...
用Bootstrap实现Tab标签页切换显示
06-09
使用 Bootstrap 实现 Tab 标签页切换显示非常简单，只需要使用 Bootstrap 的 Tab 插件和一些基本的 HTML 和 CSS 代码即可。以下是一个基本的示例： HTML 代码： ``` <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <p>这是 Tab 1 中的内容。</p> </div> <div class="tab-pane" id="tab2"> <p>这是 Tab 2 中的内容。</p> </div> <div class="tab-pane" id="tab3"> <p>这是 Tab 3 中的内容。</p> </div> </div> ``` 在这个示例中，我们使用了 Bootstrap 的 nav 和 tab 样式来创建了一个 Tab 标签页。每个 Tab 都是一个链接，点击链接可以切换到对应的标签页。我们使用了 data-toggle 属性来告诉 Bootstrap 使用 Tab 插件来处理这些链接。每个标签页都是一个 div 元素，使用了 tab-pane 样式。其中，第一个标签页使用了 active 样式来标记为默认显示的标签页。 CSS 代码： ``` .nav-tabs { margin-bottom: 15px; } .tab-content { padding: 15px; border: 1px solid #ddd; border-top: none; } ``` 在这个示例中，我们使用了一些基本的 CSS 样式来调整 Tab 标签页的外观。我们设置了一个 margin-bottom 样式来增加 Tab 标签页和其他元素之间的间距，以及一个 padding 和 border 样式来设置标签页的边框和内边距。 JavaScript 代码： ``` $(function() { $('.nav-tabs a').click(function() { $(this).tab('show'); }); }); ``` 在这个示例中，我们使用了 jQuery 库来管理 Tab 插件。当用户点击 Tab 标签页中的链接时，我们使用 tab('show') 方法来显示对应的标签页。 总之，使用 Bootstrap 实现 Tab 标签页切换显示非常简单，只需要使用一些基本的 HTML、CSS 和 JavaScript 代码即可。通过使用 Tab 插件，我们可以轻松创建漂亮且易于使用的 Tab 标签页，为用户提供更好的体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值