Question

我正在尝试仅使用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

Answer 1

一个选项是使用ng-class我们在“selected”选项卡上添加一个类（例如selected）。例如：

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

如果条件“tab == 1”为真，则上述{selected: tab==1}表示添加“已选择”类。

然后为selected标签添加css。例如，删除所选项目的下边框：

.selected {
    border-bottom: none;
}

Updated fiddle

Answer 2

您可以使用ng-class有条件地添加或删除类名。

Fiddle

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

然后在满足条件时包括您要添加的类。

.tabactive{
    border-bottom:0px solid #000;
}

Angular JS选项卡CSS

2 个答案: