bootStrap实现tab页切换

bootStrap可以简单方便的实现tab页面的切换
用法
通过data属性
可以无需写任何JavaScript来激活标签式或圆角式的导航, 只需在元素上简单的指定 data-toggle=”tab” 或 data-toggle=”pill”. 在标签 ul 添加 nav 和 nav-tabs 属性, 将应用Bootstrap标签样式.

<ul class="nav nav-tabs"><li><a href="#home" data-toggle="tab">首页</a></li><li><a href="#profile" data-toggle="tab">介绍</a></li><li><a href="#messages" data-toggle="tab">消息</a></li><li><a href="#settings" data-toggle="tab">设置</a></li>
</ul>

通过JavaScript

通过JavaScript启用可切换标签 (每个标签都需要单独激活):

$('#myTab a').click(function (e) {e.preventDefault();$(this).tab('show');
})

以多种方式激活标签:

$('#myTab a[href="#profile"]').tab('show'); // 通过名字选择
$('#myTab a:first').tab('show'); // 选择第一个标签
$('#myTab a:last').tab('show'); // 择最后一个标签
$('#myTab li:eq(2) a').tab('show'); // 选择第三个标签

方法
$().tab

激活一个标签页元素和内容容器。标签页应该含有 data-target 或 href 属性以指向dom中的某个容器节点。
举个栗子

<ul class="nav nav-tabs" id="myTab"><li class="active"><a href="#home">首页</a></li><li><a href="#profile">介绍</a></li><li><a href="#messages">消息</a></li><li><a href="#settings">设置</a></li>
</ul><div class="tab-content"><div class="tab-pane active" id="home">.首页内容..</div><div class="tab-pane" id="profile">介绍内容...</div><div class="tab-pane" id="messages">.消息内容..</div><div class="tab-pane" id="settings">.设置内容..</div>
</div><script>$(function () {$('#myTab a:last').tab('show');})$('#myTab a').click(function (e) {e.preventDefault();$(this).tab('show');
})
</script>

事件

事件	描述
show	该事件在标签开始展示时（尚未渲染完之前）触发。 event.target 指向要激活的标签，event.relatedTarget 提向之前已激活的标签（如果有的话）。
shown	该事件在标签已经呈现后（已渲染完成）触发。 event.target 指向要激活的标签， event.relatedTarget提向之前已激活的标签（如果有的话）。

$('a[data-toggle="tab"]').on('shown', function (e) {e.target // 当前活动的标签e.relatedTarget // 上一个选择的标签
})

bootStrap实现tab页切换相关推荐

PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
html图片多tab切换代码,CSS实现Tab页切换实例代码
1.hover 移入其父元素.navI时,触发鼠标的hover态,给父元素添加样式为position:relative;z-index:1;.从而提升了层级z-index.在其子元素导航内容的层级比拼 ...
用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法发布时间:2020-10-26 09:30:20 来源:亿速云阅读:104 作者:小新小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
动态路由和tab页切换路由
动态路由和tab页切换路由文章目录动态路由和tab页切换路由一.在当前页面监听路由的改变 1.beforeRouterEnter 进入前拦截路由 2.beforeRouterUpdate 路由更 ...
Axure交互-选中状态实现登录和注册Tab页切换
Axure交互-选中状态实现登录和注册Tab页切换 1.选中实现注册登录切换场景选中登录和注册两个Tab页签切换,实现注册和登录页面切换. 2.添加元件 2.1.添加按钮和动态面板 2.2.动态面板 ...
浏览器Tab页切换事件
浏览器Tab页切换事件 /**** 浏览器Tab页切换事件*/ document.addEventListener('visibilitychange',function(){if(document. ...
js利用tab键切换当前页面_js小技巧：tab页切换
依旧只是贴在这里备份,方便以后粘贴复制,高手绕过,以免浪费时间:) tab页切换 function switchTab(ProTag, ProBox) { for (i = 1; i < 5; ...
BootStrap之标签页切换
标签页切换标签页切换标签页插件第一个官方例子调用tab("show")显示tab-pane中的内容第一个例子的HTML+CSS代码 fade in效果函数介绍前提条件 ...
局部刷新时间 jsp_局部区块多个报表 TAB 页切换及局部区块的参数查询
在企业的业务系统中,如何从纷繁复杂的数据中抽丝剥茧看到关键数据信息呢?一个重要的途径就是将企业和各部门运营中关键的 KPI 集中在一起显示,同时尽量省去在企业的各个业务系统中分别查找数据. 下面是我近 ...

bootStrap实现tab页切换

bootStrap实现tab页切换相关推荐

最新文章

热门文章