角度隐藏和显示多个 div答案

【问题标题】：Angular hide and showing multiple divs角度隐藏和显示多个 div
【发布时间】：2019-01-13 15:29:07
【问题描述】：

对 Angular 来说还很陌生，我尝试在网上寻找我想要实现的示例，但所有示例似乎都没有帮助我

我有 5 个标签，每个标签代表一个信息体。我希望它最初显示第一个框信息，但是当您单击其他框时，它将替换为其他框信息

所以基本上，隐藏和显示。仅显示我单击的框的信息。这是我的意思的布局 HTML：

<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

<div class="box1-content">Lorem ipsum 1</div>
<div class="box2-content">Lorem ipsum 1</div>
<div class="box3-content">Lorem ipsum 1</div>
<div class="box4-content">Lorem ipsum 1</div>
<div class="box5-content">Lorem ipsum 1</div>

CSS：

 .boxes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
    }

    .box {
     height: 100px;
     background: red;
    }

https://codepen.io/anon/pen/gZZYpR

【问题讨论】：

使用*ngIf。您应该详细阅读 Angular 文档。

标签： javascript html angularjs css

【解决方案1】：

像这样更改您的.html

<div class="boxes">
<div class="box" (click)="tabToggle(1)">box1</div>
<div class="box" (click)="tabToggle(2)">box2</div>
<div class="box" (click)="tabToggle(3)">box3</div>
<div class="box" (click)="tabToggle(4)">box4</div>
<div class="box" (click)="tabToggle(5)">box5</div>
</div>

<div *ngIf="showTab == 1" class="box1-content">Lorem ipsum 1</div>
<div *ngIf="showTab == 2" class="box2-content">Lorem ipsum 2</div>
<div *ngIf="showTab == 3" class="box3-content">Lorem ipsum 3</div>
<div *ngIf="showTab == 4" class="box4-content">Lorem ipsum 4</div>
<div *ngIf="showTab == 5" class="box5-content">Lorem ipsum 5</div>

将此行添加到您的.ts 文件的组件下。

  showTab = 1;
  tabToggle(index){
    this.showTab =index;
  }

【讨论】：

嘿，你碰巧有一个可用的 codepen 链接吗？我试过你的代码，但它似乎没有工作codepen.io/anon/pen/gZZYpR
请检查stackblitz url link
太棒了！感谢您的帮助！

【解决方案2】：

希望我能帮助一些人！

首先，我将内容框设置为 display: none;（使用 css），然后将 click 函数附加到您的 .box div 中，如下所示：

<div class="boxes">
<div class="box" (click)="showThis = 'show1'"></div>
<div class="box" (click)="showThis = 'show2'"></div>
<div class="box" (click)="showThis = 'show3'"></div>
<div class="box" (click)="showThis = 'show4'"></div>
<div class="box" (click)="showThis = 'show5'"></div>
</div>

<div class="box1-content" *ngIf="showThis == 'show1'">Lorem ipsum 1</div>
<div class="box2-content" *ngIf="showThis == 'show2'">Lorem ipsum 1</div>
<div class="box3-content" *ngIf="showThis == 'show3'">Lorem ipsum 1</div>
<div class="box4-content" *ngIf="showThis == 'show4'">Lorem ipsum 1</div>
<div class="box5-content" *ngIf="showThis == 'show5'">Lorem ipsum 1</div>

另外，我的第一选择是使用像 Material 甚至 bootstrap 这样的库，这样您就不必担心所有这些逻辑/样式。但无论哪种方式，希望这会有所帮助！

【讨论】：