jsp页面中选项卡切换



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;

}