Docker 文档编译 - 创建标签（Tab）页

了在页面中使用标签页，例如测试页面中的标签页：https://docker.ossez.com/test/ 这个需要使用 HTML 文件。

标签页使用的是 Bootstrap CSS/JS，因此请参考相关的文档来获得有关标签页使用的更多有关内容和信息。针对标准的水平标签页，你可以拷贝和粘贴下面的表单内容，在上面的表单内容中关键的地方在 href="#id" 和 id="id"。

这个需要和你的标签页配置进行对应。以便于添加和删除标签页。

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" data-target="#tab1">TAB 1 HEADER</a></li>
  <li><a data-toggle="tab" data-target="#tab2">TAB 2 HEADER</a></li>
</ul>
<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">TAB 1 CONTENT</div>
  <div id="tab2" class="tab-pane fade">TAB 2 CONTENT</div>
</div>

有关更多标签页的内容，请参考 https://docker.ossez.com/test/ 页面中的内容。

如果上图显示的标签页。

签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方式吗？

bootstap环境下实现标签页（tab选项卡）效果比较简单，一般有两种方法：一种是用bootstrap提供的数据切换（data-toggle="tab"）功能；一种是用jQuery提供的tab组件show方法。

案例效果如下：

下面看一下实现标签页（tab选项卡）效果两种网页的代码。

使用数据切换（data-toggle="tab"）功能网页tabs.html的代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

使用jQuery提供的tab组件show方法网页tabs-1.html的代码如下：

<!DOCTYPE html>

<html>

<head>

<title>标签页JQ版</title>

</style>

</head>

<body>

</ul>

</div>

</div>

</div>

</div>

$('.nav a').on('click',function(){

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

});

</script>

</body>

</html>

至此，案例制作完成。

在线咨询

上一篇：springboot(二十四)使用springboo
下一篇：纯文本输入，就能绘制精美数学图表：CMU绘图工具登G

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Docker 文档编译 - 创建标签（Tab）页

您的项目需求