0
タブが3つあり、タブをクリックすると下枠が必要です。別のタブをクリックすると、そのタブに下の境界線が表示されます。角2：クリック時の下枠
私は以下のコードを試しました。
.features_selection_menu .menu_div {
display: inline-block;
margin-left: -3px;
vertical-align: bottom;
}
.features_selection_menu .menu_div .menu_text_div {
display: table-cell;
vertical-align: bottom;
height: 50px;
border-bottom: 2px transparent solid;
}
.features_selection_menu .menu_div .menu_text_div span {
position: relative;
bottom: 8px;
font-size: 18px;
}
.features_selection_menu .menu_div .menu_text_div_border_bottom {
border-bottom: 2px #3a3f51 solid;
}
.features_selection_menu .menu_div .default_feature_text_color {
color: #98a6ad;
}
.features_selection_menu .menu_div:first-child {
margin-left: 0px !important;
}
.features_selection_menu .menu_div:nth-child(n) {
margin-left: 40px;
}<div class="features_selection_menu" [ngSwitch]="currentFeature">
<div class="menu_div">
<div class="menu_text_div {{currentFeature=='website' ? 'menu_text_div_border_bottom' : ''}} " (click)="currentFeature='website'">
<span class="cursor_pointer {{currentFeature=='website' ? 'selected_feature_text_color' : 'default_feature_text_color'}} "> Website </span>
</div>
</div>
<div class="menu_div">
<div class="menu_text_div {{currentFeature=='app' ? 'menu_text_div_border_bottom' : ''}} " (click)="currentFeature='app'">
<span class="cursor_pointer {{currentFeature=='app' ? 'selected_feature_text_color' : 'default_feature_text_color'}} "> App </span>
</div>
</div>
</div>私はクリックで私の出力を得ることはありません。
助けがあれば助かります。
ありがとうございます。
を使用して[ngClass]ここで、この – Vivz
ただ、サイドノートを達成するために、通常のクラス属性の代わりにngClassを使用します。私はあなたがあなたのCSSに長いセレクタを持っていました。パフォーマンスを向上させるためにそれらを減らすことができます。 – BogdanC