<!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. Mac地址

    Mac地址是每张网卡的唯一标识符,也叫物理地址.硬件地址或链路地址,由网络设备制造商生产时烧在网卡的ROM中,可以修改.现在的Mac地址一般都采用6字节48bit(还有2字节16bit的Mac地址,多 ...

  2. js：使用js过程中遇到的一个小问题

    在一个作业中使用了js,函数A调用函数B.当A和B中均含有变量i的时候,相关操作结果可能会出错. 将B中的i替换为j(j不存在于A中)后,结果正确. 目前考虑原因是两个变量i有相关性(或者说实际上就是 ...

  3. Nginx + Tomcat Windows下的负载均衡配置

     Nginx + Tomcat Windows下的负载均衡配置 一.为什么需要对Tomcat服务器做负载均衡?    Tomcat服务器作为一个Web服务器,其并发数在300-500之间,如果超过50 ...

  4. C# IEnumberable & IQueryable 区别

    转自 http://blog.csdn.net/daimeisi123/article/details/46976093 在应用到IEnumberable 和IQueryable两个接口时,代码往往很 ...

  5. Django框架-目录文件简介

    Rhel6.5 Django1.10 Python3.5 Django框架-目录文件简介 1.介绍Django Django:一个可以使Web开发工作愉快并且高效的Web开发框架. 使用Django, ...

  6. Optimal Flexible Architecture(最优灵活架构)

    来自:Oracle® Database Installation Guide 12_c_ Release 1 (12.1) for Linux Oracle base目录命名规范: /pm/s/u 例 ...

  7. JAVA内部类有关

    最近在看单例模式的实现,看到有一种利用JAVA静态内部类的特性来实现,对于内部类我还真是不了解,遂了解了一下,代码贴上. /** * 内部类分为:成员内部类.局部内部类.匿名内部类和静态内部类. */ ...

  8. 使用Redis的INCR、Hsetnx、Hincrby的命令生成序列号

    Redis INCR命令 用于由一个递增key的整数值.如果该key不存在,它被设置为0执行操作之前.如果key包含了错误类型的值或包含不能被表示为整数,字符串,则返回错误.该操作被限制为64位带符号 ...

  9. linux中find批量删除空文件夹

    空文件夹 列出用find 删除管道即可 find -type d -empty | xargs -n 1 rm -rf 注意最后不能rm -f,这样删不了目录,必须-r

  10. 隐藏进程中的模块绕过IceSword的检测

    标 题: [原创] 隐藏进程中的模块绕过IceSword的检测 作 者: xPLK 时 间: 2008-06-19,17:59:11 链 接: http://bbs.pediy.com/showthr ...