角度2：点击时底部边框

Question

I have 3 tabs and I want a bottom border when clicking on tab. When I click on another tab then bottom border should be given to that tab.

I have tried below code.

 .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'}} ">&nbsp;Website&nbsp;</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'}} ">&nbsp;App&nbsp;</span> </div> </div> </div> 

I don't get my output on click.

Any help would be great.

Thank You.

Answer 1

是的，请使用ngClass代替普通的class属性

<div [ngClass]="{'menu_text_div': true, 'menu_text_div_border_bottom': currentFeature=='app'}  " >