html
<div class="middleTop_btn_con">
<a href="#" class="midd_hover">档案</a>
<a href="#" >工作</a>
</div>
<div class="rightFrame_rs_in">
<div class="rightFrame_rs_con" style="display: block;">
aaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="rightFrame_rs_con">
bbbbbbbbbbbbbbbbbbbbb
</div>
</div>
css
.rightFrame_rs_con{
display: none;
}
.middleTop_archives{
border: 1px solid #4e89ef;
background: #4e89ef;
}
.middleTop_archives.midd_hover{
border: 1px solid #4e89ef;
background: none;
color: #4e89ef;
}
.middleTop_work{
border: 1px solid #ff9966;
background: #ff9966;
}
.middleTop_work.midd_hover{
border: 1px solid #ff9966;
background: none;
color: #ff9966;
}
js:
$('.middleTop_btn_con a').click(function() {
var i = $(this).index();
$(this).addClass('midd_hover').siblings().removeClass('midd_hover');
$('.rightFrame_rs_in .rightFrame_rs_con').eq(i).show().siblings().hide();
});
