angularjs tab样式按钮切换 背景切换
时间: 2023-07-18 20:06:14 浏览: 78
可以通过添加/删除 CSS 类来切换样式,并使用 ngClass 指令绑定到相应的按钮。
首先,在 HTML 中定义按钮:
```html
<button ng-click="activeTab = 'tab1'" [ngClass]="{'active': activeTab === 'tab1'}">Tab 1</button>
<button ng-click="activeTab = 'tab2'" [ngClass]="{'active': activeTab === 'tab2'}">Tab 2</button>
<button ng-click="activeTab = 'tab3'" [ngClass]="{'active': activeTab === 'tab3'}">Tab 3</button>
```
在上面的代码中,我们使用了 ngClass 指令来根据条件添加/删除 CSS 类。activeTab 是一个作用域变量,用于跟踪当前选定的选项卡。
接下来,定义 CSS 样式:
```css
button {
border: none;
background-color: #ddd;
color: #333;
padding: 10px;
margin-right: 10px;
cursor: pointer;
}
button.active {
background-color: #333;
color: #fff;
}
```
这里定义了两个样式,一个是常规按钮样式,一个是选定按钮时的样式。当按钮被点击时,ngClass 指令会根据条件添加或删除 active 类,从而切换样式。
需要注意的是,ngClass 指令接受一个对象作为其值,该对象的属性名是 CSS 类名,属性值是一个布尔值,表示是否应该应用该类。在上面的代码中,我们使用了一个三元运算符来确定 active 类是否应该应用于按钮。
另外,如果您需要更多的动态样式,您也可以使用 ngStyle 指令,它接受一个对象作为其值,该对象的属性名是 CSS 属性名,属性值是一个表达式,表示该属性的值。
相关推荐
![text/plain](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)