1.Jsp文件中代码：
<div class="block_title_bg2">
<div class="block_title_leftShow" id="leftTitleText" onclick="switchTab(this);"> 开票明细</div>
<div class="block_title_rightShow" id="leftTitle"></div>
<div class="block_title_leftHidden" id="rightTitleText" onclick="switchTab(this);">结算明细</div>
<div class="block_title_rightHidden" id="rightTitle"></div>
<div class="block_title_explain"></div>
<div class="block_right"></div>
</div>
<div id="leftContent">
显示区
</div>
2.Js中代码
function switchTab(obj){
var tab= $(obj).attr("id");
if(tab== "leftTitleText"){
$("#leftContent").show();
$("#rightContent").hide();
$("#leftTitleText").attr("class","block_title_leftShow");
$("#leftTitle").attr("class","block_title_rightShow");
$("#rightTitleText").attr("class","block_title_leftHidden");
$("#rightTitle").attr("class","block_title_rightHidden");
}else{
$("#rightContent").show();
$("#leftContent").hide();
$("#leftTitleText").attr("class","block_title_leftHidden");
$("#leftTitle").attr("class","block_title_rightHidden");
$("#rightTitleText").attr("class","block_title_leftShow");
$("#rightTitle").attr("class","block_title_rightShow");
}
}
3.Css样式
/*显示块字段标题内容*/
.block_title_leftShow {
background:
url(${pageContext.request.contextPath}/themes/base/images/block_title_left_bg.gif)
repeat-x;
padding-left:10px;
padding-right:2px;
height:25px;
line-height:25px;
font-size:12px;
font-weight:bold;
color:#fff;
float:left;
text-align:center;
}
/*显示块字段标题内容*/
.block_title_leftHidden {
background:
url(${pageContext.request.contextPath}/themes/base/images/block_title_left_bgno.gif)
repeat-x;
padding-left:10px;
padding-right:2px;
height:25px;
line-height:25px;
font-size:12px;
font-weight:bold;
color:#fff;
float:left;
text-align:center;
cursor:pointer;
}
/*显示块字段标题右侧背景*/
.block_title_rightShow {
width:26px;
height:25px;
float:left;
background-image:
url(${pageContext.request.contextPath}/themes/base/images/block_title_bg.gif)
;
background-repeat:no-repeat;
}
/*显示块字段标题右侧背景*/
.block_title_rightHidden {
width:26px;
height:25px;
float:left;
background-image:
url(${pageContext.request.contextPath}/themes/base/images/block_title_bgno.gif)
;
background-repeat:no-repeat;
cursor:pointer;
}