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

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 关于VPN的一些问题

    在今在外出差,必须得连上公司的数据库,那就得使用VPN了,设置起来还算比较简单(我是win10), 简单介绍一下: 打开设置或者直接点击右下角的

  3. swift错误 Expressions are not allowed at the top level

    ``` ... earlier we said top-level code isn't allowed in most of your app's source files. The excepti ...

  4. October 27th Week 44th Thursday 2016

    The art of being wise is the art of knowing what to overlook. 智慧之道在于懂得该忽略什么. Always do your best. Wh ...

  5. javascript 核心语言笔记 6 - 对象

    对象是 JavaScript 的基本数据类型.是一种复合值:将很多值聚合在一起.对象可以看做是无序集合,每个属性都是一个名/值对.这种基本数据结构还有很多叫法,比如「散列」(hash).「散列表」(h ...

  6. gulp如何使用

    简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码 ...

  7. teamviewer "TeamViewer Daemon is not running

    执行下面的命令问题解决: # teamviewer --daemon enable enable Sat Jan :: CST Action: Installing daemon () for 'up ...

  8. 《ASP.NET MVC高级编程（4版）》读书笔记（5）表单和HTML辅助方法

    5.1 表单使用 5.1.1 action 和 method 特性 <form action="/Home/Index">     <input name=&qu ...

  9. 【JavaScript】ES6 新语法

    function* 声明 function* 声明(function关键字后跟一个星号)定义一个generator(生成器)函数,返回一个Generator对象. 生成器是一种可以从中退出并在之后重新 ...

  10. CSS系列：在HTML中引入CSS的方法

    HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...