bootstrap 标签页 demo

青旅半醒 2021-09-28 04:42 581阅读 0赞

### 引入文件 ###

jquery-3.2.1.min.js  
bootstrap.css  
bootstrap.js

### 基本代码 ###

<ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
      <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
      <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
      <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
    </ul>
    
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="home">...1</div>
      <div role="tabpanel" class="tab-pane" id="profile">...2</div>
      <div role="tabpanel" class="tab-pane" id="messages">...3</div>
      <div role="tabpanel" class="tab-pane" id="settings">...4</div>
    </div>

#### 效果图 ####

![在这里插入图片描述][20190213162159613.png]

*  a标签的href属性指向下面的div。例如`href="#home"`点击之后显示下面id为home的div。
 *  nav-tabs样式可以换成nav-pills。

### js控制显示tab页 ###

jQuery("[href='#messages']").tab("show");

注意：需要获取上面的a标签的jQuery对象，并调用`tab("show")`方法。

[20190213162159613.png]: /images/20210923/842b55d7ae9a421ba79c7ee5d7ee341d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，581人围观）

还没有评论，来说两句吧...

相关阅读

相关 Bootstrap教程(23)--标签页

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 概述 2. 使用方法 3. 小结 1. 概述标签页使用频率

系统管理员/ 2022年11月06日 03:57/ 0 赞/ 130 阅读

相关 Bootstrap标签页插件

1.用法通过data属性，添加data-toggle=”tab”或data-toggle=”pill”到锚文本链接中 <ul class="nav nav-ta

Bertha 。/ 2022年08月23日 09:55/ 0 赞/ 154 阅读

相关 Bootstrap分页,标签和微章

分页（Pagination）,是一种无序列表。 .pagination:在页面上显示分页 .disabled,.active:通过.disabled来定义不可

拼搏现实的明天。/ 2022年08月23日 08:44/ 0 赞/ 123 阅读

相关 bootstrap 模态框生成标签页

1，先补充bootstrap标签页的设置方式参考文章：[点击打开链接][Link 1] 2，模态框实现代码（为了方便直接使用项目代码，所以很多代码不用细看，只

深碍√TFBOYSˉ_/ 2022年08月23日 01:23/ 0 赞/ 162 阅读

相关 Bootstrap标签页和工具提示插件

标签页插件 > 标签页就是通常所说的选项卡功能 //也可以换成胶囊式 //<ul class="nav nav-pills"> <ul id="

雨点打透心脏的1/2处/ 2022年06月12日 06:21/ 0 赞/ 154 阅读

相关 Bootstrap路径分页标签和徽章组件

路径组件 > 路径组件也叫面包屑导航 <ol class="breadcrumb"> <li><a href="">首页</a></li>

亦凉/ 2022年06月12日 05:07/ 0 赞/ 194 阅读

相关 bootstrap标签页（tab）

Bootstrap 标签页（Tab）插件标签页（Tab）在 [Bootstrap 导航元素][Bootstrap] 一章中介绍过。通过结合一些 data 属性，您可以轻

r囧r小猫/ 2022年05月31日 04:23/ 0 赞/ 265 阅读

相关 bootstrap 多标签，支持分页

<div class="col-lg-12" style="float:none"> <div class="tabs-container"> <

Dear 丶/ 2022年05月22日 00:40/ 0 赞/ 131 阅读

相关 bootstrap 标签页 demo

引入文件 jquery-3.2.1.min.js bootstrap.css bootstrap.js 基本代码 <ul class="nav n

青旅半醒/ 2021年09月28日 04:42/ 0 赞/ 582 阅读

相关浅析Bootstrap中Tab（标签页）的使用方法

Bootstrap 导航元素使用相同的标记和基类，改变修饰的`class`，可以在不同的样式间进行切换如"`.nav-pills`"（胶囊式导航）与 “`.nav-tab

雨点打透心脏的1/2处/ 2021年06月26日 16:06/ 0 赞/ 468 阅读