tab切换

css:

.tabs1 {
            width:135px;
            cursor:pointer;
            height: 20px;
            text-align:center;
        }

====================================================================================================

jsp:

<div class="box_main">
    <ul class="tabs" style="border-style:solid; border-width:0 0 1px; list-style-type:none; width: 285px;">
        <li id="tab1" class="tabs1" style="margin-top: 5px;border:1px solid #95b8e7;background-color:#9ecfe6;">tab1标题</li>
        <li id="tab2" class="tabs1" style="margin-top: 5px;border:1px solid #95b8e7;">tab2标题</li>
    </ul>
    <div id="tabContent">
        <div id="tabContent1" style="display:block;">
            tab1内容
        </div>
        <div id="tabContent2" style="display:none;">
            tab2内容
        </div>
    </div>
</div>

======================================================================================================

js:

$("#tab1").click(function(){
    $("#tabContent1").css('display','block');
    $("#tab1").css('background-color','#9ecfe6');
    $("#tabContent2").css('display','none');
    $("#tab2").css('background-color','');
});
$("#tab2").click(function(){
    $("#tabContent1").css('display','none');
    $("#tab1").css('background-color','');
    $("#tabContent2").css('display','block');
    $("#tab2").css('background-color','#9ecfe6');
});