12.登录页面左右切换。

登录页面左右切换

html：

<div class="user">

    　 <div class="col-lg-2 col-md-2 col-sm-2">

　　　　<div class="user-list">
　　　　<ul>
　　　　　　<li class="user-hov"><a href="javascript:void(0);">个人信息</a></li>
　　　　　　<li><a href="javascript:void(0);">修改密码</a></li>
　　　　　　<li><a href="javascript:void(0);">我的订单</a></li>
　　　　　　<li><a href="javascript:void(0);">上传案例</a></li>
　　　　　　<li><a href="javascript:void(0);">我的案例</a></li>
　　　　</ul>
　　　　</div>
　　</div>

　　<div class="col-lg-10 col-md-10 col-sm-10">
　　<div class="user-div">
　　　　<div class="user-personal ">
　　　　　　<h2>这是个人信息界面</h2>
　　　　</div>
　　　　<div class="user-modify ">

　　　　　　<h2>这是修改密码界面</h2>

　　　　</div>

　　　　<div class="user-order ">
　　　　　　<h2>这是我的订单界面</h2>

　　　　</div>

　　　　<div class="user-upload ">
　　　　　　<h2>这是上传案例界面</h2>

　　　　</div>
　　　　<div class="user-case ">
　　　　　　<h2>这是我的案例界面</h2>

　　　　</div>

　　</div>
　　</div>
</div>

css:

.user .user-list li{
　　height:50px;
　　font-size: 24px;
　　line-height: 50px;
}
.user .user-list li a{
　　display: inline-block;
　　 120px;
　　height: 50px;
　　color:#000;
}
.user-hov{
　　border-bottom:3px solid #2979ff;
　　color:#2979ff;
}
.user-select{
　　display:none;
}
.user-tab{
　　display: block;
}
.user .user-personal{
　　height: 250px;
　　background: #eee;
}
.user-personal h2{
　　text-align: center;
}
.user .user-modify{
　　display:none;
　　background: #eee;
}
.user .user-order{
　　display:none;
　　background: #eee;
}
.user .user-upload{
　　display:none;
　　background: #eee;
}
.user .user-case{
　　display:none;
　　background: #eee;
}

js:

$(function(){
　　$('.user-list li').click(function() {
　　　　$(this).addClass("user-hov").siblings().removeClass();
　　　　$(".user-div div").hide().eq($('.user-list li').index(this)).show();

         //最重要的一点，由于(".user-div div")取得是user-div下面的所有div，所以当后代标签里面除了直系子标签还有其他div的时候，

    //就要考虑换标签。比如li,ul等等在后代标签里面没有出现的标签！
　　});
})