我是新手,对隐藏和显示内容有疑问。我有3个按钮,分别是按钮A,按钮B和按钮c。当我单击按钮A时,按钮A(即div A)的内容应可见,按钮B(即div B)和按钮C(即div C)的内容应这样隐藏。
但是我可以在单击相应按钮时显示相应的div,但是我无法隐藏其他两个div。
谁能帮我吗。
提前致谢。
请在下面找到我正在尝试的代码。
previousWeekData(){
console.log("Previous Button Clicked");
this.isShow = !this.isShow;
}
nextWeekData(){
console.log("Next Button Clicked");
this.isShow = !this.isShow;
}
todaysWeekData(){
console.log("Todays Button Clicked");
this.isShow = !this.isShow;
}
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<div class="btn btn-dark" [(viewDate)]="viewDate" (click)="previousWeekData()">
Previous
</div>
<div class="btn btn-outline-secondary" (click)="todaysWeekData()">
Today
</div>
<div class="btn btn-dark" [(viewDate)]="viewDate" (click)="nextWeekData()">
Next
</div>
</div>
</div>
</div>
<div class="row">
<div *ngIf = "isShow">Previous week datay.</div>
<div *ngIf = "!isShow">Next week data.</div>
<div *ngIf = "isShow">Current week data</div>
</div>
</div>
<div *ngIf="div1">
ABC
</div>
<div>
DEF
</div>
<div>
GHI
</div>
<button (click)="div1Function()"></button>
<button (click)="div2Function()"></button>
<button (click)="div3Function()"></button>
TS文件
div1:boolean=true;
div2:boolean=true;
div3:boolean=true;
div1Function(){
this.div1=true;
this.div2=false;
this.div3=false
}
div2Function(){
this.div2=true;
this.div1=false;
this.div3=false
}
div3Function(){
this.div3=true;
this.div2=false;
this.div1=false
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句