Bootstrap入门(二十七)JS插件4:标签页

标签页的切换可以带动内容的变化

首先我们引入CSS文件

        <link href="bootstrap.min.css" rel="stylesheet">

在里面创建一个容器div,添加<ul><li>来承载标签,下拉菜单也是可以嵌套进去的

第一个默认设置为被选中

           <ul id="mytab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">home</a></li>
<li><a href="#profile" data-toggle="tab">profile</a></li>
<li class="dropdown">
<a href="#" id="mytabdrop1" class="dropdown-toggle" data-toggle="dropdown">dropdown<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#dropone" tabindex="-1" data-toggle="tab">one</a></li>
<li><a href="#droptwo" tabindex="-1" data-toggle="tab">two</a></li>
</ul>
</li>
</ul>

在引入js文件(使触发下拉菜单)

        <script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>

点击dropdown,效果:

为对应的标签页添加内容,div中要设置好id,使点击不同的标签时会有内容跳转的效果

            <div id="mytabcon" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
</div>
<div class="tab-pane fade" id="profile">
<p>2hello world!</p>
<p>2hello world!</p>
<p>2hello world!</p>
<p>2hello world!</p>
<p>2hello world!</p>
<p>2hello world!</p>
<p>2hello world!</p>
</div>
<div class="tab-pane fade" id="dropone">
<p>111hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
</div>
<div class="tab-pane fade" id="droptwo">
<p>222hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
<p>hello world!</p>
</div>
</div>

效果(默认打开的页面)

点击隔壁的标签“profile”,标签和内容都有跳转

在标签页的切换点击中与其他效果

添加js代码(注意用“#”索引id)

$("#mytab a:last").tab("show")  :找到id为mytab的地方,选中里面<a>标签中最后一个,进行显示效果

        <script>
$("#mytab a:last").tab("show");</script>

刷新页面,的确选中最后一个

修改,比如我们想选中第1个(默认第一个是0,从0开始)

        <script>
$("#mytab li:eq(0) a").tab("show");
</script>

还可以点击的时候,有淡入淡出的效果,只需在内容div那里添加fade属性,上面的代码已经添加了

有时候,切换的有一些提示

可以这样,这里是切换的时候弹出有“hello”字体的框

show.bs.tab是指点击时

shown.bs.tab是指点击后

            $('a[data-toggle="tab').on("show.bs.tab",function(e){
alert("hello")
});

效果

Bootstrap入门(二十七)JS插件4:标签页的更多相关文章

  1. Bootstrap入门(十七)组件11:分页与标签

    Bootstrap入门(十七)组件11:分页与标签   1.默认样式的分页 2.分页的大小 3.禁用的分页 4.翻页的效果 5.两端对齐的分页 6. 标签的不同样式 7. 标签的大小   先引入本地的 ...

  2. Bootstrap<基础二十七> 多媒体对象(Media Object)

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  3. js基础--浏览器标签页隐藏或显示状态 visibility详解

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 在工作中我们可能会遇到这样的需求,当浏览器切换到别的标签页或着最小化时,我们需要暂停页面上正在播放的视频或者音乐,这个需求 ...

  4. Bootstrap插件——(Tab)标签页

    项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...

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

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

  6. 分页插件--根据Bootstrap Paginator改写的js插件

    刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...

  7. Bootstrap入门二:响应式页面布局

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...

  8. Java开发笔记(一百二十七)Swing的标签

    提起AWT的标签控件Label,那个使用体验可真叫糟糕,不但不支持文字换行,而且对中文很不友好,既可能把中文显示为乱码,还不支持博大精深的各种中文字体.所幸Swing的升级版标签JLabel在各方面都 ...

  9. js实现多标签页效果

    点击导航按钮切换div的内容 html代码: <div class="tabs"> <ul id="tab"> <li>&l ...

  10. js封装tab标签页

    <html> <head> <title></title> <meta charset="UTF-8"> <sty ...

随机推荐

  1. HDU 5171 GTY's birthday gift 矩阵快速幂

    GTY's birthday gift Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...

  2. sqlDataAdapter的FillSchema用法

    摘自于网络:http://blog.csdn.net/bupt_zoucq/article/details/6653385 FillSchema是用来向DataTable中填入详细的元数据信息的,例如 ...

  3. 水熊虫 - Nature Communication

    想发好文章?先看好文献! 生物信息分析类的文章都有着比较明显的套路,如果你深刻的掌握了这些套路,相信有一天你也能发Nature(子刊). Extremotolerant tardigrade geno ...

  4. nginx 红黑树详解

    1 介绍 这部分终于整理完了,太耗时间了,留下来备忘吧! 之前看STL源码时,只是研究了红黑树的插入部分.在stl源码剖析的书中,也没有涉及到删除操作的分析,这次对删除操作也进行了详细的研究, 并且还 ...

  5. Java——类谜题

    1.令人混淆的构造器 代码如下格式: public class Confusing { private Confusing(Object o) { System.out.println("O ...

  6. MAC 调整Launchpad 图标大小

    1.调整每一列显示图标数量 defaults write com.apple.dock springboard-rows -int 7 2.调整每一行显示图标数量 defaults write com ...

  7. C程序编译执行过程

    C程序编译执行过程   认识C编译执行过程,是C学习的开端. 简单说C语言从编码编译到执行要经历一下过程:   C源代码 编译---->形成目标代码,目标代码是在目标机器上运行的代码. 连接-- ...

  8. Big Data架构师技能图谱

    大数据通用处理平台 Spark Flink Hadoop 分布式存储 HDFS 资源调度 Yarn Mesos 机器学习工具 Mahout Spark Mlib TensorFlow (Google ...

  9. iOS8学习笔记2--autolayout

    iOS支持的设备如今已经具有了很多的尺寸,针对这些不同的尺寸每一个都做一个独立的APP肯定是不现实的,于是苹果在iOS8之后推出了autolayout和sizeclass,同时还有VFL界面设计语言 ...

  10. ZOJ 3927 Programming Ability Test

    水题,判断一下加起来是否大于等于80 #include<cstdio> #include<cstring> #include<cmath> #include< ...