项目中用到了Bootstrap的(Tab)标签页插件,记录如下：

代码如下：

    　　<div class="tabbable">

           　　 <ul class="nav nav-tabs">

                  　　<li class="active"><a href="#第一个id" data-toggle="tab">选项一</a></li>   //第一个选项，　　
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //href 对应第7行的id

                 　　 <li><a href="#第二个id" data-toggle="tab">选项二</a></li>    　　　　　　　　 //第二个选项
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //href 对应第10行的id

               </ul>

               <div class="tab-content">

                  <div class="tab-pane active" id="第一个id">  　　　　　　　　　　　　　　　　　　　//第一页

                    　　　文字一

                  </div>

                 <div class="tab-pane" id="第二个id">  　　　　　　　　　　　　　　　　　　　　　　 　//第二页

                        文字二

                 </div>

              </div>

        </div>

效果如下：

初始化时为下图：

aaarticlea/png;base64,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" alt="" />

点击选项二如下图：aaarticlea/png;base64,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" alt="" />

Bootstrap文字教程地址:http://www.uedsc.com/bootstrap-page-header.html

重要的事情说三遍：

欢迎指出错误和不对的地方，以及提出建议，我会及时更新在博客里！

欢迎指出错误和不对的地方，以及提出建议，我会及时更新在博客里！

欢迎指出错误和不对的地方，以及提出建议，我会及时更新在博客里！

Bootstrap插件——(Tab)标签页的更多相关文章

  1. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  2. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  3. 如何一行jquery代码写出tab标签页（链式操作）

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  4. Easyui 关闭jquery-easui tab标签页前触发事件

    关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...

  5. VIM 实现tab标签页及分屏，切换命令

    1,在一个窗口中,VIM 的小tab标签页命令:   :tabnew [++opt选项] ［+cmd］ 文件            建立对指定文件新的tab :tabc       关闭当前的tab ...

  6. ExtJS配置TabPanel可以拖拽Tab标签页

    1.环境说明 ExtJS版本:7.4.0.42 Sencha Cmd: v7.5.1.20 开发工具:WebStorm 2022.1.1 PS:如果是老版本的ExtJS,引入Ext.ux.TabReo ...

  7. Bootstrap——设置Tab标签切换

    最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...

  8. 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  9. 整理用js实现tab标签页

    首先是css样式,比如这样的: <style> *{ ; ; list-style: none; font-size: 12px; } .notice{ width: 298px; hei ...

随机推荐

  1. Android 自动更新 + IIS7 添加APK mime

    如果APK文件放在IIS下面需要添加APK的mime,否则会出现下面错误 可以在IIS上添加mime映射 .apk application/vnd.android   下面内容转自:http://ww ...

  2. Hibernate学习——映射关系

    学习记录 O(∩_∩)O . 如果你恰巧路过,希望你能停下脚步瞧一瞧,不足之处望指出,感激不尽~ 使用工具: 1.eclipse   2.hibernate压缩包(hibernate_4.3.11)  ...

  3. Visual Studio宏注释模板

    前言 有时写代码需要写注释的时候 甚是苦恼 写吧 怕麻烦 不写吧 似乎这代码估计自己都看不懂 权衡之下 似乎找一个自动写注释的方法最靠谱 一直在VS下开发 偶尔听人说过有一个宏工具可以帮助开发者快速注 ...

  4. javascript中，数组常用的方法有哪些？

    答案: push pop shift unshift join sort concat reverse splice slice indexOf

  5. 海康SDK编程指南(C#二次开发版本)

    海康SDK编程指南 目前使用的海康SDK包括IPC_SDK(硬件设备),Plat_SDK(平台),其中两套SDK都需单独调用海康播放库PlayCtrl.dll来解码视频流,返回视频信息和角度信息.本文 ...

  6. python socket 编程之一：编写socket的基本步骤

    一.socket 编写server的步骤: 1.第一步是创建socket对象.调用socket构造函数.如: socket = socket.socket( family, type ) family ...

  7. MySQL应用层传输协议分析

    001.在MySQL应用层传输协议中主要有如下三种类型的数据: 01.整数类型. 02.字符串类型. 03.描述数据包. 002.MySQL应用层传输协议中对整型的说明: 01.固定长度的整型---- ...

  8. QT：轻松获取网页源码

    获取网页源码的小例子,代码很简单,就不多作解释了. 不过一定要注意网页的编码问题,否则会出现乱码的!!! #include <QtCore> #include <QtNetwork& ...

  9. zabbix 组信息

    mysql> select * from groups; +---------+------------------+----------+-------+ | groupid | name | ...

  10. Linux命令行之逗趣无极限

    Linux命令行之逗趣无极限 . Linux"sl"命令行 尽管"sl"代表了"蒸汽机机头",但它是用来提醒那些命令行控们别把"l ...