为了账号安全,请及时绑定邮箱和手机立即绑定

ionic+cordova+angularjs Tab切换

标签:
AngularJS

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;
}

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;
};

点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
8
获赞与收藏
47

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消