tab+tab

<!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的更多相关文章

关于 \t 水平制表符 Horizontal Tab (TAB)
今天在学learn python the hard way ex26修改的时候,有一个关于\t的问题,下面分别为代码以及输出结果: 1 poem = """ 2 \tTh ...
GooglePlay 首页效果----tab的揭示效果(Reveal Effect) (1)
GooglePlay 首页效果----tab的揭示效果(Reveal Effect) (1) 前言: 无意打开GooglePlay app来着,然后发现首页用了揭示效果,连起来用着感觉还不错. 不清楚 ...
FragmentPagerAdapter+ViewPager实现Tab切换效果
1.Activity 加载布局文件,获取Viewpager控件给ViewPager填充适配器. import android.app.ActionBar; import android.app ...
多iframe使用tab标签方式添加、删除、切换的处理实例
紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...
什么时候使用tab键来对齐代码和代码的风格
在大括号嵌套语法中, 最好是左右(前后) 大括号单独占一行, 这样的嵌套关系最清晰也就是说, c/c++的风格是最清晰的. 而java php将左大括号放在上一行的末尾, 稍次一点. 不过在if ...
滚动固定TAB在顶部显示
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
Android tab导航的几种方法:ActionBar tab +fragment,Viewpager+pagerTitleStrip,开源框架ViewPageIndicator 和 ViewPager
action来实现tab标签并跟fragment结合因为要写新闻客户端这个tab导航是必须的这里我写几个小练习,希望大家融会贯通. 1actionbar设置tab +fragment 布局是个l ...
jq tab
<div id="outer"> <ul id="tab"> <li class="current">t ...
Android 动态Tab分页效果实现
当前项目使用的是TabHost+Activity进行分页,目前要做个报表功能,需要在一个Tab页内进行Activity的切换.比方说我有4个Tab页分别为Tab1,Tab2,Tab3,Tab4,现在的 ...

随机推荐

linux vim 插入行号
1 在文本中插入行号最近有朋友提到某编辑器有一个可以插入行号的插件,问Vim有没有办法可以在文章中插入行号.%$^&*#8~#$@#!--让我们看一下有多少种方式可以在vim中插入行号或数字 ...
ionic使用方法
windows下安装配置 npm install -g ionic npm install -g cordova ionic start myproject cd myproject ionic pl ...
五种方式让你在java中读取properties文件内容不再是难题
一.背景最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供java程序动态的读取,修改变量,不再需要修改代码的问题.就借此机会把Spring+SpringMVC ...
jquery 替换img 属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
UILabel 根据文本内容设置frame
CGRect senderFrame = cell.senderLabel.frame; CGRect creatAtFrame = cell.creatAtLabel.frame; CG ...
ElasticSearch性能优化官方建议
ES 手册如何提高ES的性能不要返回较大的结果集 ES是设计成一个搜索引擎的,只擅长返回匹配查询较少文档,如果需要返回非常多的文档需要使用Scroll. 避免稀疏因为ES是基于Lucene来索引 ...
爬虫requests模块 2
会话对象¶ 会话对象让你能够跨请求保持某些参数.它也会在同一个 Session 实例发出的所有请求之间保持 cookie, 期间使用 urllib3 的 connection pooling 功能.所 ...
【Java EE 学习 78 下】【数据采集系统第十天】【数据采集系统完成】
一.项目源代码地址二.项目演示
UWP学习记录12-应用到应用的通信
UWP学习记录12-应用到应用的通信 1.应用间通信 “共享”合约是用户可以在应用之间快速交换数据的一种方式. 例如,用户可能希望使用社交网络应用与其好友共享网页,或者将链接保存在笔记应用中以供日后参 ...

tab+tab

tab+tab的更多相关文章

随机推荐

热门专题