tabView特效
2020-02-24 本文已影响0人
最好的自己_3d47
<style>
.tabview>ul{
display: flex;
}
.tabview>ul li{
flex: 1;
line-height: 40px;
background-color: #fff;
border-bottom: solid 1px #fff;
text-align: center;
}
.tabview>ul li.active,.tabview>ul li:active{
color:#3266CC;
border-bottom: solid 1px #3266CC;
}
.tabview .view{
color: #666;
padding: 14px;
display: none;
}
.tabview .view:nth-child(2){
display: block;
}
</style>
<script>
$(function () {
$('.tabview>ul li').on(touchclick,function (e) {
alert(1)
if($(this).hasClass('active'))return;
$('.tabview>ul li').removeClass('active');
$(this).addClass('active');
var vname = $(this).data('view');
var stage = $(this).parent().parent();
stage.find('.view').hide();
stage.find('.v'+vname).show();
});
})
</script>
<html>
<div class="tabview">
<ul>
<li class="active" data-view="1">执业经历</li>
<li data-view="2">任职医院</li>
</ul>
<div class="view v1">
<p>11112吴星伟，男，毕业于上海医科大学临床医学专业，眼科医学博士，1996年起就职于上海交通大学附属第一人民医院，至今拥有20年的临床实践经验。</p>
<p>熟练诊治眼科各类常见疾病，ICL人工晶体植入治疗高度竟是和散光、疑难病例，高度近视白内障手术等眼科显微手术。</p>
</div>
<div class="view v2">
<p>22222吴星伟，男，毕业于上海医科大学临床医学专业，眼科医学博士，1996年起就职于上海交通大学附属第一人民医院，至今拥有20年的临床实践经验。</p>
<p>熟练诊治眼科各类常见疾病，ICL人工晶体植入治疗高度竟是和散光、疑难病例，高度近视白内障手术等眼科显微手术。</p>
</div>
</div>
</html>
