tab切换

 

   

 *{
        padding: 0;margin: 0;
    }
    .all{
        width: 100%;overflow: hidden;
    }
    ul li{
        list-style: none;
    }
    .box{
        width: 400px;height: 30px;background: blue;color: #fff;
    }
    .box li{
        width: 100px;height: 30px;line-height: 30px;float: left;text-align: center;cursor: pointer;
    }
    .text{
        width: 400px;height: 300px;line-height: 300px;text-align: center;position: relative;
    }
    .text li{
        width: 400px;height: 300px;position: absolute;top: 0;left: 0;display: none;background: #eee;
    }
    .text li:nth-child(1){
        display: block;
    }

<div class="all">
    <ul class="box">
        <li>北京</li>
        <li>上海</li>
        <li>山东</li>
        <li>陕西</li>
    </ul>

    <ul class="text">
        <li>
            北京的内容
        </li>
        <li>
            上海的内容
        </li>
        <li>
            山东的内容
        </li>
        <li>
            陕西的内容
        </li>
    </ul>
</div>

$(".box li").click(function(){
     var $index = $(this).index();
     $(".text").find("li").eq($index).css({"display":"block"}).siblings("li").css({"display":"none"})
})