Angular JS选项卡CSS

发布时间：2020-12-17 17:19:51 所属栏目：安全来源：网络整理

导读：我正在尝试使用AngularJS仅使用我的网站构建标签页.我在某个地方看到用 Jquery增加AngularJS是不可取的. 我很难删除选项卡和选项卡内容之间的界限.例如.选择选项卡1后,选项卡1下方的行将消失. 任何人都可以帮助解决CSS问题吗？谢谢. 我的HTML html ng-appdi

我正在尝试使用AngularJS仅使用我的网站构建标签页.我在某个地方看到用 Jquery增加AngularJS是不可取的.

我很难删除选项卡和选项卡内容之间的界限.例如.选择选项卡1后,选项卡1下方的行将消失.

任何人都可以帮助解决CSS问题吗？

谢谢.

我的HTML

<html ng-app>
<div class="tabgroup" ng-init="tab=1">
<div class="tab" ng-click="tab = 1">tab1</div>
<div class="tab" ng-click="tab = 2">tab2</div>
</div>
<div class="tabcontents">   
<div ng-show="tab == 1">
    tab 1 contents
</div>
<div ng-show="tab == 2">
    tab 2 contents
</div>
</html>
</div>

当前的CSS

.tabgroup{
background:white; 
}
.tab{
color:black;    
display:inline-block;
border: 1px solid #000000;
padding: 5px;
}
.tabcontents{
border: 1px solid #000000;    
padding: 5px;
}

这是我的Fiddle

解决方法

一个选项是使用 ng-class,我们在“选定”选项卡上添加一个类(例如选中).例如：

<div class="tab" ng-class="{selected: tab==1}" ng-click="tab = 1">tab1</div>
<div class="tab" ng-class="{selected: tab==2}" ng-click="tab = 2">tab2</div>

上面的{selected：tab == 1}表示如果条件“tab == 1”为真,则添加“selected”类.

然后为选定的选项卡添加css.例如,删除所选项目的下边框：

.selected {
    border-bottom: none;
}

Updated fiddle

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!