<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>添加商品</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<style type="text/css">
#tabbar-div{
background:none repeat scroll 0 0 #80BDCB;
height: 27px;
padding-left: 10px;
padding-top: 1px;
}
#tabbar-div p{
margin:2px 0 0;
}
.tab-front{
background: none repeat scroll 0 0 #BBDDE5;
border-right: 2px solid #278296;
cursor:pointer;
font-weight: bold;
line-height: 20px;
padding: 4px 15px 4px 18px;
}
.tab-back{
border-right: 1px solid #fffff;
color: $fffff;
cursor: pointer;
line-height: 20px;
padding: 4px 15px 4px 18px;
}
.tab-hover{
background: none repeat scroll 0 0 #94c9d3;
border-right: 1px solid #fffff;
color: $fffff;
cursor: pointer;
line-height: 20px;
padding: 4px 15px 4px 18px;
}
</style>
<script type="text/javascript">
//加载事件里 定义click事件
$(function(){
$('.table_a').hide(); //全部table变暗
$('.table_b').show(); //默认table高亮
$('#tabbar-div span').click(function(){
$('#tabbar-div span').attr('class','tab-back');//全部标签变暗
$(this).attr('class','tab-front'); //当前标签 高亮
$('.table_a').hide(); //全部table变暗
var idflag = $(this).attr('id');//当前table高亮
$('#'+idflag+"-tb").show();
});
});
</script>
</head>
<body>
<div id="tabbar-div">
<p>
<span id="general-tab" class="tab-front">通用信息</span>
<span id="detail-tab" class="tab-back">详细描述</span>
<span id="mix-tab" class="tab-back">其他信息</span>
</p>
</div>
<div></div>
<div style="font-size: 13px;margin: 10px 5px">
<form action="__SELF__" method="post" enctype="multipart/form-data">
<table border="1" width="100%" class="table_a" id="detail-tab-tb"><tr>
<td>22222222222</td>
</tr></table>
</form>
<table border="1" width="100%" class="table_a" id="mix-tab-tb"><tr>
<td>33333333333</td>
</tr></table>
</form>
<form action="__SELF__" method="post" enctype="multipart/form-data">
<table border="1" width="100%" class="table_a table_b" id="general-tab-tb">
<tr>
<td>111111111</td>
<td><input type="text" name="goods_name" />默认table</td>
</tr>
</table>
</form>
</div>
</body>
</html>