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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>角色选项卡</title>

<script src="js/jquery.min.js"></script>

<script type="text/javascript">

//外层切换

$(function(){

    $('.tabPanel>ul>li').click(function(){

        $(this).addClass('hit').siblings().removeClass('hit');

        $('.panes>div:eq('+$(this).index()+')').show().siblings().hide();

    })

})  

//tab切换1

$(function(){

    var $tab1_li = $('#tab1 ul li');

    $tab1_li.click(function(){

        $(this).addClass('selected').siblings().removeClass('selected');

        var index = $tab1_li.index(this);

        $('div.tab1_box > div').eq(index).show().siblings().hide();

    });

});

//tab切换2

$(function(){

    var $tab2_li = $('#tab2 ul li');

    $tab2_li.click(function(){

        $(this).addClass('selected').siblings().removeClass('selected');

        var index = $tab2_li.index(this);

        $('div.tab2_box > div').eq(index).show().siblings().hide();

    });

});

</script>

<style>

*{margin:0;padding:0;word-wrap:break-word;word-break:break-all;}

ul,li{ list-style:none}

/**tab切换**/

/**tabs**/

.tabPanel ul{ width:1035px;height:40px;}

.tabPanel ul li{float:left;margin:0 2px 0 0;border:1px solid #e3e7e8; line-height:40px;width:110px;text-align:center;cursor:pointer;

text-shadow:0 1px 0 #fff;  border-radius:4px 4px 0 0;  box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.5);  }

.tabPanel .hit{cursor:pointer; background:#e9edee }

.pane{min-height:100px;display:none; margin-top:10px}  

/* tab1 */

#tab1{position:relative;}

#tab1 .tab1_menu{width:100%;float:left;position:absolute;z-index:1;}

#tab1 .tab1_menu li{float:left;width:80px;height:30px;line-height:30px;cursor:pointer;text-align:center;margin:0 2px 0 0; border:none}

#tab1 .tab1_box{clear:both;top:30px;position:relative;}

#tab1 .tab1_menu .selected{ color:#32d47a;cursor:pointer;}

.hide{display:none;}

.tab1_box div{padding:10px;} 

/* tab2 */

#tab2{position:relative;}

#tab2 .tab2_menu{width:100%;float:left;position:absolute;z-index:1;}

#tab2 .tab2_menu li{float:left;width:80px;height:30px;line-height:30px;cursor:pointer;text-align:center;margin:0 2px 0 0;border:none}

#tab2 .tab2_box{clear:both;top:30px;position:relative;}

#tab2 .tab2_menu .selected{color:#32d47a;cursor:pointer;}

.hide{display:none;}

.tab2_box div{padding:10px;}

</style>

</head>

<body>

<div class="tabPanel">

  <ul>

    <li class="hit">快捷支付</li>

    <li>网银支付</li>

  </ul>

  <div class="panes">

    <div class="pane" style="display:block;">

      <div id="tab1">

        <ul class="tab1_menu">

          <li class="selected">1</li>

          <li>2</li>

          <li>3</li>

        </ul>

        <div class="tab1_box">

          <div>11</div>

          <div class="hide">22</div>

          <div class="hide">33</div>

        </div>

      </div>

    </div>

    <div class="pane">

      <div id="tab2">

        <ul class="tab2_menu">

          <li class="selected">时事</li>

          <li>体育</li>

          <li>新闻</li>

        </ul>

        <div class="tab2_box">

          <div>时事的内容</div>

          <div class="hide">体育的内容</div>

          <div class="hide">新闻的内容</div>

        </div>

      </div>

    </div>

  </div>

</div>

</body>

</html>

tab+tab的更多相关文章

  1. 关于 \t 水平制表符 Horizontal Tab (TAB)

    今天在学learn python the hard way ex26修改的时候,有一个关于\t的问题,下面分别为代码以及输出结果: 1 poem = """ 2 \tTh ...

  2. GooglePlay 首页效果----tab的揭示效果(Reveal Effect) (1)

    GooglePlay 首页效果----tab的揭示效果(Reveal Effect) (1) 前言: 无意打开GooglePlay app来着,然后发现首页用了揭示效果,连起来用着感觉还不错. 不清楚 ...

  3. FragmentPagerAdapter+ViewPager实现Tab切换效果

    1.Activity  加载布局文件,获取Viewpager控件   给ViewPager填充适配器. import android.app.ActionBar; import android.app ...

  4. 多iframe使用tab标签方式添加、删除、切换的处理实例

    紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案 如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...

  5. 什么时候使用tab键来对齐代码和代码的风格

    在大括号嵌套语法中, 最好是左右(前后) 大括号单独占一行, 这样的嵌套关系最清晰 也就是说, c/c++的风格是最清晰的. 而java php将 左大括号放在上一行的末尾, 稍次一点. 不过在if ...

  6. 滚动固定TAB在顶部显示

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  7. Android tab导航的几种方法:ActionBar tab +fragment,Viewpager+pagerTitleStrip,开源框架ViewPageIndicator 和 ViewPager

    action来实现tab标签 并跟fragment结合 因为要写新闻客户端这个tab导航是必须的 这里我写几个小练习,希望大家融会贯通. 1actionbar设置tab +fragment 布局是个l ...

  8. jq tab

    <div id="outer"> <ul id="tab"> <li class="current">t ...

  9. Android 动态Tab分页效果实现

    当前项目使用的是TabHost+Activity进行分页,目前要做个报表功能,需要在一个Tab页内进行Activity的切换.比方说我有4个Tab页分别为Tab1,Tab2,Tab3,Tab4,现在的 ...

随机推荐

  1. oracle‘s package,function,proceture编译时无响应（解决）

    在对Procedure.Function或Package进行Debug时,如果长时间没有操作,公司的防火墙会杀掉会话连接.这个时候数据库不会主动的释放会话的资源,如果再次对Procedure.Func ...

  2. tp框架获取常量信息、方法、命名空间

    获取系统常量信息: public function ShowInFo() { var_dump(get_defined_constants(true)); //如果参数为true,则分类显示 } 在这 ...

  3. 编译安装 varnish-4.1.2和yum 安装 varnish-4.0.3

    vanish可以让用户自己选择缓存数据是存于内存还是硬盘,存于内存一般基于二八法则即常访问的数据是磁盘存储的总数据五分之一,因此内存也应该是硬盘文件大概五分之一.如果有多台vanish则,总内存满足即 ...

  4. javascript之循环保存数值

    javascript之循环保存数值 语言都是相通的,这句话在我学javascript时有的深刻的意识.js中的for循环与java中的for循环有很大相似之处. 先看下面这段代码 for(var i= ...

  5. 手机开发中的AP与BP的概念

    转自:http://blog.csdn.net/macong01/article/details/15504611 手机的AP和BP: AP:ApplicationProcessor,即应用芯片 BP ...

  6. struts 2 时间控件

    在使用struts2框架时,为我们提供了时间选择器控件:datetimepicker.但是在使用过程中会出现一些问题,主要就是struts2版本更新时做了一些修改.在struts2.0时,使用< ...

  7. Code First数据库迁移

    生成数据库 修改类文件PortalContext.cs的静态构造函数,取消当数据库模型发生改变时删除当前数据库重建新数据库的设置. PortalContext() { Database.SetInit ...

  8. 记一次在java中的日期parse错误

    String dateString = "2014101517"; new SimpleDateFormat("yyyyMMddHH").parse(dateS ...

  9. .NET程序运行过程产生的问题

    1.数据兼容性 功能模块的开发,会影响历史数据以及新数据的更新和体现.比如开发功能007,007支持了金额可变,数量不可变的原理.而历史数据均是数量可变,金额不可变的原理.此时,就会产生了问题. 2. ...

  10. Copy-On-Write容器

    Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这个内容的时候,才会真正把内容Copy出去形成一个新的内容然后再改, ...