HTML:
<div class="class-introduce-block">
<div class="class-tab-block">
<ul>
<li class="li-active" ng-class="{true: '', false: 'li-active'}[isme['0']]" ng-click="acShow(0)">简介</li>
<li ng-class="{true: '', false: 'li-active'}[isme['1']]" ng-click="acShow(1)">评价</li>
</ul>
</div>
<div id="tab-01" ng-hide="isme[0]">
<p>课程简介内容</p>
</div>
<div id="tab-02" ng-hide="isme[1]">
<div class="star-block">
<span>发表评论</span>
</div>
<!--评论列表-->
<div class="pl-lists-block">
<div class="pl-list">
<div class="row">
<div class="col-10 pl-img">
<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="img/1.jpg">
</div>
<div class="col-90">
<div class="pl-content-block">
<ul>
<li>
<span class="user-name">张三</span>
<span class="pl-date">2016-10-10</span>
<!-- <div id="QuacorGrading" class="QuacorGrading" style="width:150px;float:left;display: inline-block">
<input name="1" type="button" style="background-position: 0% 50%;background-size: 25px">
<input name="2" type="button" style="background-position: 0% 50%;background-size: 25px">
<input name="3" type="button" style="background-position: 0% 50%;background-size: 25px">
<input name="4" type="button" style="background-size: 25px;">
<input name="5" type="button" style="background-size: 25px">
</div>-->
</li>
<li>
<p>都是一些理论的东西,没什么用</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.class-tab-block{
border-top: #f5f5f5 1px solid;
border-bottom: #f5f5f5 1px solid;
height: 55px;
line-height: 50px;
}
.class-tab-block ul li{
float: left;
width: 50%;
text-align: center;
font-size: 1.0rem;
font-family: 微软雅黑;
}
.li-active{
color: #21ab5e;
border-bottom: #21ab5e 3px solid;
}
padding: 10px;
background-color: #f4f4f4;
}
tab-01 p{line-height: 1.5;
font-size: 0.8rem;
text-indent: 2em;
}
tab-01 h1{font-size: 0.8rem;
font-family: 微软雅黑;
font-weight: 600;
}
tab-01 ul li{line-height: 2.0;
font-size: 0.6rem;
font-family: 微软雅黑;
}
tab-02{background-color: #f4f4f4;
}
JS:
$scope.isme = [false,true];
$scope.acShow = function(index) {
$scope.isme = [true, true];
$scope.isme[index] = false;
};
共同学习,写下你的评论
评论加载中...
作者其他优质文章