<!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. 调用图片按钮的img图片

    今天是我学前端的第12天.早上起床后活动筋骨时看了<JS的基本属性操作>,作业是模拟手机发送短信.文字都能传输到<div>上,就是图片不知道怎么传.折腾了好久才弄清楚,多亏了某 ...

  2. 将input file的选择的文件清空的两种解决方案

    <input type="file" id="fileupload" name="file" /> 上传文件时,选择了文件后想清 ...

  3. 安装Python环境时遇到的问题

    问题描述:An error occurred during the installation of assembly 'Microsoft.VC90.MFC,version="9.0.210 ...

  4. Redis3重建Cluster

    1.关闭cluster全部节点2.删除所有nodes.conf文件3.开启全部节点4.依次flushall5.重建集群即可 Share the post "Redis3重建Cluster&q ...

  5. js 倒计时

    /** * 启动,秒杀倒计时. time格式:DDHH24MISS 例如: time="11223344"; * */function timer(time) { var d = ...

  6. Oracle存储过程语法

    原文链接:http://www.jb51.net/article/31805.htm Oracle存储过程基本语法 存储过程  1 CREATE OR REPLACE PROCEDURE 存储过程名  ...

  7. sql 语句

    INSERT 基本语法:INSERT INTO table_name VALUES(value1,value2,value3,...); 指定列:INSERT INTO table_name(colu ...

  8. 常用的sublime text插件（很爽哦）

    个人比较懒,平时喜欢用webstorm,但是因为webstorm打开实在太慢了,并且太看设备,所以本人编辑简单的文件依然会选择使用sublime,虽然网上有很多关于此类插件的分享了,但是感觉都是片段, ...

  9. Linux学习笔记（12）-进程间通信|匿名管道

    Linux的进程间通信有几种方式,包括,管道,信号,信号灯,共享内存,消息队列和套接字等-- 现在一个个的开始学习! ----------------------------------------- ...

  10. 禁用ViewPager边界滑动效果（转）

    反射设置方法 private EdgeEffectCompat leftEdge; private EdgeEffectCompat rightEdge; public void DisableLRS ...