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();

});