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>
<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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Xuman0927/p/6088687.html