Question

我想基于活跃的tabswitch和tab1来更改类tab2的背景颜色。我正在Angular 6上执行此代码。

<div class="tabswitch">
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">tab1</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">tab2</label>
  <div id="content1">b</div>
  <div id="content2">a</div>
</div>

Answer 1

To use my logic, you should declare a variable named activeTab in your component and keep activated tab name inside of that variable and then you can use [ngStyle] directive to achieve this,

<div class="tabswitch" [ngStyle]="{'background-color': activeTab === 'tab1' ? 'green' : 'red' }">
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">tab1</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">tab2</label>
  <div id="content1">b</div>
  <div id="content2">a</div>
</div>

More examples are here.

Answer 2

<div class="tabswitch" ng-class="active">
<input type="radio" id="tab1" name="tabs" ng-click="active='tab1c'" checked>
<label for="tab1">tab1</label>
<input type="radio" id="tab2" name="tabs" ng-click="active='tab2c'">
<label for="tab2">tab2</label>
<div id="content1">b</div>
<div id="content2">a</div>
</div>

为类tab1c和tab2c创建CSS

角度6：根据活动标签更改div的背景颜色

2 个答案: