使用Bootstrap tab页切换的使用

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<base target="_self">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache,must-ridate">
<meta http-equiv="expires" content="0">

<title>tab页切换</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<style type="text/css">
</style>
</head>

<body>
<p style="display:none;">
1.参考网站:http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html
2..fade增加淡入淡出效果;添加 .fade 到每个 .tab-pane 后面;
3.第一个标签页必须添加 .in 类,以便淡入显示初始内容;
</p>

<!-- tab标签 -->
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
W3Cschool Home
</a>
</li>

<li>
<a href="#ios" data-toggle="tab">
iOS
</a>
</li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>
</ul>
</li>
</ul>

<!-- 每个tab页对应的内容 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>W3Cschoool菜鸟教程是一个提供最新的web技术站点。</p>
</div>
<div class="tab-pane fade" id="ios">
<p>iOS 是一个由苹果公司开发和发布的手机操作系统。</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>jMeter 是一款开源的测试软件。</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>EJB是一个创建高度可扩展性和强大企业级应用程序的开发架构。</p>
</div>
</div>

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

</script>
</body>

</html>

有几个知识点:

1)

$(‘#clglTab a[href="#ysplb"]‘).on(‘shown.bs.tab‘, function(e){
do somehting...

});

关于根据连接的href来取元素的,类似的还有:

$(‘a[data-toggle="tab"]‘)
$(‘#myTab a[href="#profile"]‘).tab(‘show‘)

$(‘#myTab a:first‘).tab(‘show‘)
$(‘#myTab a:last‘).tab(‘show‘)

$(‘#myTab li:eq(2) a‘).tab(‘show‘)
2)两个事件:
$("xxx").on("shown.bs.tab", function(e){})是tab页显示的时候触发的事件;
show.bs.tab:
该事件在标签页显示时触发,但是必须在新标签页被显示之前。分别使用event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。

shown.bs.tab:
该事件在标签页显示时触发,但是必须在某个标签页已经显示之后。分别使用
如:


$(function(){

$(‘a[data-toggle="tab"]‘).on(‘shown.bs.tab‘, function (e) {

// 获取已激活的标签页的名称

var activeTab = $(e.target).text();

// 获取前一个激活的标签页的名称

var previousTab = $(e.relatedTarget).text();

$(".active-tab span").html(activeTab);

$(".previous-tab span").html(previousTab);

});

});


3)通过javascript来启用标签页:

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

原文地址:https://www.cnblogs.com/chengguanghua/p/9419246.html

时间: 2024-10-11 15:56:50

使用Bootstrap tab页切换的使用的相关文章

微信Tab页切换

参考开源项目PagerSlidingTabStrip 做了一些小修改,比如设置Tab页平均铺满效果.字体变色等 微调的代码请 源码 下载 关于我 private void addTab(final int position, View tab) { tab.setFocusable(true); tab.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { pager.setCurre

jquery实现tab页切换显示div

1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

Bootstrap tab页的动态ajax加载

要实现这样的功能,点击tab导航ajax动态加载页面,当加载过之后,点击则不再重新加载,直接显示原来加载的页面. tab页面代码: <!-- Nav tabs --><ul class="nav nav-tabs" role="tablist" id="maintab">  <li class="active"><a href="#tab1"  onclick='s

js实现tab页切换选项卡代码特效

原文:js实现tab页切换选项卡代码特效 源代码下载地址:http://www.zuidaima.com/share/1550463557864448.htm JS 写的tab切换效果

局部区块多个报表 TAB 页切换及局部区块的参数查询

在企业的业务系统中,如何从纷繁复杂的数据中抽丝剥茧看到关键数据信息呢?一个重要的途径就是将企业和各部门运营中关键的 KPI 集中在一起显示,同时尽量省去在企业的各个业务系统中分别查找数据. 下面是我近期遇到的一个客户实际要求的效果,在一个列表页面中有多个模块,每个模块又可以以多 TAB 页的方式切换不同的报表,并且每个区块都有自己独立的查询过滤条件.在查询条件发生变化的时候,只是该区块刷新,而不需要刷新整个页面. 显然,上面截图的效果,通过硬编码或者通过 iframe 嵌套多张报表也是可以实现这

利用jquery写的一个TAB页切换效果

函数如下 [javascript] view plaincopy /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == no) { $(this).addClass(tab_c_css); }else { $(this).removeClass(tab_c_css); $(this).addClass(tab_n_css); } }) if (con) { $

bootstrap tab页签插件

基于bootstrap.js <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <m

前端的小玩意(9.1)——做一个仿360工具箱的web页面(Tab按钮切换)

需求: ①写一个web版的360工具箱,示意图如下: ②无左上返回按钮,右上按钮有皮肤切换,下拉框(但无点击逻辑): ③按钮点击有事件,但事件是console.log(按钮名): ④可以在全部工具和我等工具自由切换: ⑤可以点击左下角的编辑,然后根据实际表现设置: ⑥可以在全部工具里面,点击按钮,然后添加到我的工具这边来: ⑦效果尽量与原图相同,只使用jquery库: 效果网址: http://jianwangsan.cn/toolbox (一)tab页切换 ①切图: 先切图,如图:(不想用他的

Activity“ 阻止自动弹出软键盘”的方法 -尤其是对于Tab页下的!

我的activity是Tab页签下的~! 所以应把代码加在继承于TabActivity的那个activity中!!而不是由点击Tab页启动的那个activity <activity android:name=".MyTabActivity" android:label="@string/app_name" android:windowSoftInputMode="stateHidden" /> 又遇到Tab页中有的Activity需要