Angular JS選項卡CSS

我想用我的網站只使用AngularJS來構建選項卡頁。我看到某個地方用Jquery來增強AngularJS是不可取的。Angular JS選項卡CSS

我很難刪除標籤和標籤內容之間的界限。例如。選擇標籤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

來源

2013-12-09 Wilson

你的演示似乎是工作。你最好的選擇是把它變成一個指令。看看bootstrap用戶界面的想法。 http://angular-ui.github.io/bootstrap/ – Rob

一種選擇是將「選擇」選項卡上使用ng-class我們添加一個類（例如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>

上述{selected: tab==1}說加上「選擇了」如果條件「標籤== 1」爲真類。

然後爲selected選項卡添加css。例如刪除所選項目的下邊框：

.selected { 
    border-bottom: none; 
}

Updated fiddle

來源

2013-12-09 18:22:12 KayakDave

如何直接刪除tab1和tabcontent之間的界限？ – Wilson

你能詳細說說你的意思嗎？即使它沒有被選中？ – KayakDave

您可以使用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; 
}

來源

2013-12-09 18:21:57

Angular JS選項卡CSS

回答

相關問題