tab标签切换

<!--html--!>

<div class='tabtitle'>
        <ul>
            <li class='hide'>北京</li>
            <li>天津</li>
            <li>上海</li>
        </ul>
    </div>
    <div class='tabcontent'>
        <div class='current' style='display:block'>我爱北京</div>
        <div class='current'>我爱天津</div>
        <div class='current'>我爱上海</div>
    </div>

<!--css--!>

*{
    margin:0px;
}

li{
    list-style-type: none;
}

.tabtitle ul li{
    float: left;
    border: 1px solid red;
    width: 60px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}

.tabtitle ul{
    overflow: hidden;
}

.tabcontent{
    margin-left: 40px;
}

.tabcontent div{
    border: 1px solid red;
    width: 183px;
    height: 150px;
}

.hide{
    background: yellow;
    color:red;
}


.current{
    display: none;
}

<!--js--!>

$(function(){
    //获取li的对象
    var li = $('.tabtitle ul li');
    //获取要显示的div对象
    var dival = $('.current');
    li.mouseover(function(){
        //获取当前的对象
        var _this = $(this);
        //减轻服务器压力
        setTimeout(function(){
            _this.addClass('hide').siblings().removeClass();
            dival.eq(_this.index()).show().siblings().hide();
        },300);
    });
});