<!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. The note of Vue.js

    In computed field, increment operator is not supported.

  2. ecshop不同样式文章页调用不同文章模板

    根据需要,希望不同的文章分类下的文章页有不一样的页面风格.也就是说根据文章分类ID来判断,输出不同的文章页模板. 重点就是文章分类的ID. 打开:article.php,在120多行左右,找到$sma ...

  3. Vim配置文件

    转载 原文网址:http://www.cnblogs.com/ma6174/archive/2011/12/10/2283393.html 花了很长时间整理的,感觉用起来很方便,共享一下. 我的vim ...

  4. JS获取URL参数

    $(function () { var action = getUrlParam("action"); alert(action) }); //根据URL中的参数获取值 funct ...

  5. 只有IE64位能上网。

  6. 文件上传之 HttpPostedFile

    HttpPostedFile类,提供对客户端已上载的单独文件的访问. 公共属性如下: SaveAs()方法,用于保存上传文件的内容. 用法为: #region 文件上传 /// <summary ...

  7. 【Java EE 学习 77 上】【数据采集系统第九天】【通过AOP实现日志管理】【通过Spring石英调度动态生成日志表】【日志分表和查询】

    一.需求分析 日志数据在很多行业中都是非常敏感的数据,它们不能删除只能保存和查看,这样日志表就会越来越大,我们不可能永远让它无限制的增长下去,必须采取一种手段将数据分散开来.假设现在整个数据库需要保存 ...

  8. 前端试题本（Javascript篇）

    JS1. 下面这个JS程序的输出是什么:JS2.下面的JS程序输出是什么:JS3.页面有一个按钮button id为 button1,通过原生的js如何禁用?JS4.页面有一个按钮button id为 ...

  9. java中包的命令行（cmd)操作详解

    一.什么是包? 为了更好地组织类,防止在一个空间下出现类重名,Java提供了包机制.包是类的容器,用于分隔类名空间(类型于C++中的命名空间).如果没有指定包名,所有的示例都属于一个默认的无名包(又称 ...

  10. iOS---FMDB数据升级

    本人在这里重要强调一下!!! 看这里,看这里,看这里,重要的事说三遍. 本人在项目开发中,由于需求问题,不得不对已经建立好的数据库进行修改(添加字段),我就很随意的直接添加了对一个的字段,运行一下,数 ...