<ul class="nav nav-tabs" id="otherInfoTab">
<li class="active"><a href="#time_line">时间轴</a></li>
<li><a href="#complain">投诉</a></li>
<li><a href="#sms_send">短信回评</a></li>
<li><a href="#order_path">订单轨迹</a></li>
<li><a href="#order_paths">xxx</a></li>
</ul> <div class="tab-content">
<div class="tab-pane active" id="time_line"></div>
<div class="tab-pane" id="complain"></div>
<div class="tab-pane" id="sms_send"></div>
<div class="tab-pane" id="order_path"></div>
<div class="tab-pane" id="order_paths">zz</div>
</div> <script>
$(function () {
$('#otherInfoTab a:last').tab('show');//初始化显示哪个tab $('#otherInfoTab a').click(function (e) {
e.preventDefault();//阻止a链接的跳转行为
$(this).tab('show');//显示当前选中的链接及关联的content
})
})
</script>

bootstrap Tab页切换的更多相关文章

  1. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  2. ECSHOP:首页实现显示子分类商品,并实现点击Tab页切换分类商品

    例子:首页实现显示子分类商品,并实现点击Tab页切换分类商品(非AJAX) 开始:    1. 打开调试开关     文件地址:include/cls_template.php 找到 : functi ...

  3. tab页切换

    做了一个tab页切换.点击不同tab,显示对应的内容信息 如图 =================HTML===================== <!doctype html public ...

  4. 用CSS实现Tab页切换效果

    用CSS实现Tab切换效果 最近切一个页面的时候涉及到了一个tab切换的部分,因为不想用js想着能不能用纯CSS的选择器来实现切换效果.搜了一下大致有下面三种写法. 利用:hover选择器 缺点:只有 ...

  5. bootstrap tab页

    ---恢复内容开始--- <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> ...

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

    函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == ...

  7. 不用jquery实现tab页切换,刷新,后退,前进状态自动维护 很好用

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. ReactJS尝鲜:实现tab页切换和菜单栏切换和手风琴切换效果,进度条效果

    前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

  9. 小技巧之Selenium如何切换到弹出的Tab页中

    今天群里讨论了一个问题,如何将selenium的操作焦点切换到浏览器中新弹出来的Tab页中,正好对应到了昨天的那篇文章“小技巧之在浏览器中打开新的页签”.今天就带大家来解决这个问题: 先封装一个Tab ...

随机推荐

  1. NGINX一览无余

    Nginx 是如何实现高并发的? 异步,非阻塞,使用了epoll 和大量的底层代码优化. 如果一个server采用一个进程负责一个request的方式,那么进程数就是并发数.正常情况下,会有很多进程一 ...

  2. 阿里P7教你如何使用 Spring 配置动态数据源实现读写分离

    最近搭建的一个项目需要实现数据源的读写分离,在这里将代码进行分享,以供参考. 关键词:DataSource .AbstractRoutingDataSource.AOP 首先是配置数据源 <!- ...

  3. MyCat教程一:MyCat的简单介绍

    MyCat教程二:mysql主从复制实现 MyCat教程三:安装及配置介绍 MyCat教程四:实现读写分离 MyCat教程五:实现分库分表 MyCat教程六:全局序列号-全局主键的自增长 一.MyCa ...

  4. php mysql 按照指定年月查找数据 数据库create_time为时间戳

    $moneyloglist = MoneyLog::where(['user_id' => $this->auth->id]) ->where($where) ->whe ...

  5. CSS选择符总结(Selectors)

    一.通配选择符(Universal Selector):    语法:*    说明:1.*表示通配符,表示所有的            2.格式:*{样式列表}            3.用于整个页 ...

  6. Java SpringBoot 手记

    SpringBoot Git:https://github.com/spring-projects/spring-boot Maven (mvn)环境配置: 下载地址:http://maven.apa ...

  7. Netbackup常用命令--bprestore

    bprestore bprestore – 从 NetBackup 服务器还原文件 大纲 bprestore [-A | -B | -rb] [-K] [-l | -H | -y] [-r] [-T] ...

  8. python老师博客

    前端基础之HTML http://www.cnblogs.com/yuanchenqi/articles/6835654.html 前端基础之CSS http://www.cnblogs.com/yu ...

  9. Beta冲刺博客汇总(校园帮-追光的人)

    所属课程 软件工程1916 作业要求 Beta冲刺博客汇总 团队名称 追光的人 作业目标 汇总Beta阶段的博客,方便查看 冲刺日志 Beta之前-凡事预则立(校园帮-追光的人)5-22 Beta冲刺 ...

  10. 一台服务器配置多个TOMCAT

    如果要在一台服务器上配置多个Tomcat,主要就是要避免Tomcat服务器的端口冲突的问题.只需要修改CATALINA_HOME\conf\server.xml中的启动端口和连接端口就OK了! 下面我 ...