继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

ionic+cordova+angularjs Tab切换

紫晴20
关注TA
已关注
手记 3
粉丝 8
获赞 47

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 src="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;
}

tab-01{
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;
};

打开App,阅读手记
2人推荐
发表评论
随时随地看视频慕课网APP