登录页面左右切换
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;
width: 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等等在后代标签里面没有出现的标签！
});
})
