<!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>

<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

<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();

    })

})

</script>

<style>

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

body{font-family:"宋体","Arial";font-size:12px;background:#fff;min-width:800px;}

ul,li{list-style:none;}

a{text-decoration:none;color:#555;}

h3{font-size:14px;font-weight:bold;margin:0em 0 0.5em 0;}

h2{font-size:16px;font-weight:bold;margin:1em 0}  

/**tabs**/

.tabPanel ul{height:23px;border-bottom:1px solid #CECECE; width:294px;}

.tabPanel ul li{

    float:left;margin:0 2px 0 0;border:1px solid #CECECE;font-size:13px;height:22px;line-height:22px;width:94px;text-align:center;cursor:pointer;

    font-family:"Microsoft Yahei";

    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{

    border-color:#B9D894 #B9D894 #FFF;cursor:pointer;color:black;text-shadow:0 1px 0 #FFF;

}  

.pane{border:1px solid #B9D894;border-top:0;min-height:100px;background-color:#fff;display:none; width:290px; height:285px}

.pane p{padding:15px 15px 0 10px;}

.pane h4{padding:15px 15px 0 10px;font-size:14px;font-weight:bold;}  

#Main {

    border-width: 1px;

    padding: 30px 20px 30px 30px;

    text-align: left;

    font-family:"Microsoft Yahei";

    font-size: 13px;

}

div#Heading {

    color: #904;

    font-family: arial;

    font-size: 150%;

    font-weight: bold;

    margin: 0;

    padding: 0 0 15px;

}

h2 {

    border-bottom: 1px solid #ddd;

    color: #999;

    font-size: 105%;

    font-weight: bold;

    margin: 0 0 8px;

    padding: 0;

    text-transform: uppercase;

}

p {

    margin: 0;

    padding: 6px 0;

}  

.MyLabel {

    color: #999;

    display: block;

    font-size: 13px;

    font-weight: bold;

    margin: 6px 0 2px;

    text-transform: uppercase;

}

input.Textbox {

    font-family: verdana,arial,sans-serif;

    height: 20px;

    width: 160px;

    border:1px solid #CECECE;

}

a.Button:link {

    background: none repeat scroll 0 0 #904;

    border-color: #999;

    border-right: 1px solid #999;  

    border-width: 1px;

    color: #fff;

    display: block;

    font-family: Verdana;

    font-size: 15px;

    font-weight: bold;

    padding: 5px 12px 3px 20px;

    width: 50px;

}

a.Button:visited {

    background: none repeat scroll 0 0 #904;

    border-color: #999;

    border-right: 1px solid #999;

    border-style: solid;

    border-width: 1px;

    color: #fff;

    display: block;

    font-size: 15px;

    font-weight: bold;

    padding: 3px 12px;

    width: 60px;

}

span.ErrorMessage {

    color: #904;

    display: block;

    font-weight: bold;

}

p.Small {

    font-size: 85%;

    margin-top: 12px;

}

.Button {

    color:#FFF;

    font-family:"Microsoft Yahei";

    font-size: 13px;

    font-weight: bold;

    width: 60px;

    background-color:#73AD2E;

    border-radius:5px;

    border:none;

}

a.tip_lnk:link, a.tip_lnk:active, a.tip_lnk:visited {

    color:#444;

    text-decoration: underline;

}

a.top_return {

    font-weight: normal;

    padding-left: 5px;

}  

.form_div1 {

    height: 50px;

    overflow: hidden;  

}

.form_div1 span {

    display: block;

    float: left;

    overflow: hidden;

    padding: 0 0 0 6px;  

}  

.form_div1 .span2 {

    color: #999;

    padding-top: 6px;

}

.form_div1 .input1 {

    -moz-border-bottom-colors: none;

    -moz-border-left-colors: none;

    -moz-border-right-colors: none;

    -moz-border-top-colors: none;

    border-color: pink;

    border-image: none;

    border-right: 1px solid pink;

    border-style: solid;

    border-width: 1px;

    color: #666;

    height: 20px;

    line-height: 20px;

    width: 198px;

}

.form_div1 .input2 {

    width: 109px;

}  

.form_div1 .span1 {

/*    padding-top: 6px;

    text-align: right;*/

    width: 55px;

}  

.b{ margin:15px 10px 10px 10px;}  

</style>

</head>

<body>

<div >

  <div class="tabPanel">

    <ul>

      <li class="hit">企业方</li>

      <li>供应方</li>

      <li>京体网</li>

    </ul>

    <div class="panes">

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

        11

      </div>

      <div class="pane">

       22

      </div>

      <div class="pane">

       33

      </div>

    </div>

  </div>

</div>

</body>

</html>

tab的更多相关文章

  1. android 使用Tabhost 发生could not create tab content because could not find view with id 错误

    使用Tabhost的时候经常报:could not create tab content because could not find view with id 错误. 总结一下发生错误的原因,一般的 ...

  2. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

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

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

  4. 通过easyui tab添加的子页面JS脚本必须放在body才生效

    通过easyui tab添加的子页面JS脚本必须放在body才生效 可通过Chrome查看元素时,head标签是否含有你自己写的JS代码

  5. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  6. python 添加tab补全

    在平时查看Python方法用到tab补全还是很方便的. 1. mac 平台 配置如下: mac是类Unix平台,需要在添加一条配置内容到bash_profile 中(默认是没有这个文件,可以新建一个放 ...

  7. ViewPager与Tab结合使用

    我们有时候需要 标题页卡与ViewPager结合使用,其实原理也很简单. 不过工程中要引入android-support-design.jar 首先是布局文件 <android.support. ...

  8. html tab页面切换事件。

    $(document).bind("visibilitychange",function(e){ //只对tab页面切换有效 //document.visibilityState ...

  9. angualr 实现tab选项卡功能

    tab.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  10. [mark] 使用Sublime Text 2时如何将Tab配置为4个空格

    在Mac OS X系统下,Sublime Text是一款比较赞的编辑器. 作为空格党的自觉,今天mark一下使用Sublime Text 2时如何将Tab配置为4个空格: 方法来自以下两个链接: ht ...

随机推荐

  1. Sublime 3 如何设置xftp 排除文件夹“bower_components”，“node_modules”

    “bower_components”,“node_modules”这个文件夹,作为模块得引用文件,不需要下载本地进行编码,这里得文件非常多,若是不把这个两个文件夹排除掉掉话,通过xftp下载所有文件的 ...

  2. 记录NS_ASSUME_NONNULL_BEGIN和NS_ASSUME_NONNULL_END。

    Nonnull区域设置(Audited Regions) 如果需要每个属性或每个方法都去指定nonnull和nullable,是一件非常繁琐的事.苹果为了减轻我们的工作量,专门提供了两个宏:NS_AS ...

  3. quickSort算法导论版实现

    本文主要实践一下算法导论上的快排算法,活动活动. 伪代码图来源于 http://www.cnblogs.com/dongkuo/p/4827281.html // imp the quicksort ...

  4. 修复win10升级时断电inaccessible boot device

    代码提示0xc0000001 这里的解决方法对系统以及个人的没有文件丢失的影响,没有重装以及重置上丢失东西的顾虑 解决方法: WINDOWS/system32/config/RegBack/SYSTE ...

  5. PHP之session与cookie

    1.session与cookie的关系 众所周知,session是存储在服务器端,cookie是存储在客户端,如果禁用了浏览器的cookie功能,很多时候(除非进行了特殊配置)服务器端就无法再读取se ...

  6. yii 简单依赖注入

    <?phpnamespace app\controllers;use Yii;use yii\di\Container;use yii\di\ServiceLocator;use yii\web ...

  7. 2016-11-05实战-定义ssh服务的日志

    1.编辑/etc/rsyslog.conf 输入 local 0 .*     /var/log/sshd.log   #日志的保存路径 2.定义ssh服务的日志级别 编辑sshd服务的主配置文件:/ ...

  8. artTemplate-master的应用

    刚开始,在没有使用这个模板之前,一致都是后台返回一个json的字符串,来在前端自己拼接字符串,不但麻烦,而且费时费力,而且还有时候经常拼接错误!导致了工作效率的延长 js模板的使用 <scrip ...

  9. jQuery简单入门

    jQuery是什么 John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作为什么要使用jQuery (1)write less do ...

  10. 分享篇——我的Java学习路线

    虽然之前我是开发出身,但是我学习的语言是Objective-c,这个语言使用起来范围比较窄,对于自动化学习来说也是无用武之地,所以我自己学习了Java,对于一个有开发经验的人来说学习一门新语言相对来说 ...