html****************
<!-- select自定义选项 -->
<ul class="cheadMy">
<li [class.cked_color]="mychidex==idx" *ngFor="let item of checkdList,let idx=index" (click)="mylistCheck(idx)">
<img *ngIf="mychidex!=idx" src="../../assets/imgs/no_ck_icon.png" alt="">
<img class="imgwh" *ngIf="mychidex==idx" src="../../assets/imgs/cked_icon.png" alt="">
{{item}}
</li>
</ul>
<!-- tab切换颜色 选中 -->
<ul class="alluio">
<li [class.activeone]='typesss==1' (click)="clickactive(1)">很像变道
<div [class.activeoneb]='typesss==1' *ngIf="typesss==1" class="divbgcolor">
很像变道
</div>
</li>
<li [class.activetwo]='typesss==2' (click)="clickactive(2)">条鱼is发给部分
<div [class.activetwob]='typesss==2' *ngIf="typesss==2" class="divbgcolor">
条鱼is发给部分
</div>
</li>
<li [class.activethree]='typesss==3' (click)="clickactive(3)">伟二大哥峰
<div [class.activethreeb]='typesss==3' *ngIf="typesss==3" class="divbgcolor">
伟二大哥峰
</div>
</li>
<li [class.activefour]='typesss==4' (click)="clickactive(4)">热热和额外给
<div [class.activefourb]='typesss==4' *ngIf="typesss==4" class="divbgcolor">
热热和额外给
</div>
</li>
</ul>
<div>
</div>
ts***********
export class ComComponentDengl implements OnInit {
mychidex=0;
typesss=1;
checkdList=["单向喜欢","天福号","周末","才貌双全","欣欣向荣","天天向上"];
ngOnInit() { }
mylistCheck(idx:number){
this.mychidex=idx
}
clickactive(bumbbb:number){
this.typesss=bumbbb
}
}
less************
.cheadMy{
margin: 0;
padding: 0;
list-style: none;
height: 40px;
li{
float: left;
150px;
font-size: 16px;
color: #003277;
img{
vertical-align: text-bottom;
}
.imgwh{
18px;
height: 18px;
}
}
.cked_color{
color: #ff0000
}
}
.alluio{
margin: 0;
padding: 0;
list-style: none;
position: relative;
li{
// float: left;
150px;
font-size: 16px;
color: #003277;
padding: 10px;
text-align: center;
}
.activeone{
background-color: #ff6600;
color: #fff;
.activeoneb{
border:1px solid #ff6600;
}
}
.activetwo{
background-color: green;
color: #fff;
.activetwob{
border:1px solid green;
}
}
.activethree{
background-color: #061386;
color: #fff;
.activethreeb{
border:1px solid #061386;
}
}
.activefour{
background-color: #991271;
color: #fff;
.activefourb{
border:1px solid #991271;
}
}
}
.divbgcolor{
height: 169px;
88%;
// border: 1px solid #0d0d0e;
color: #000000;
background-color: #fff;
position: absolute;
top: 0;
left: 150px;
}