5:如果单击第一个按钮,则按钮样式不起作用

我在网站上编码了一个导航条。它有6个按钮,当前路径处于活动状态时突出显示。以下图像显示它应该是如何看的。Navigation-bar应该如何看但是当我点击顶部按钮时,以下按钮的CSS样式不起作用。带有bug的栏杆仅通过单击非常顶部按钮进行。当我删除顶部按钮时,它会在“新”顶部按钮上发生。其他5个按钮工作很好。

存在导航栏的代码

.container {
    float: right;
    background-color: rgb(199, 199, 199); 
  }

.btn-nav {
    display: inline-block;
    background: transparent;
    border: 1px solid black;
    height: 60px;
    width: 60px; 
    margin: 11px;
    border-radius: 15px;
    cursor: pointer;
  }
  
  .active-link {
    display: inline-block;
    background: white;
    border: 1px solid black;
    /*padding: 5px 5px;*/
    height: 60px;
    width: 60px; 
    margin: 11px;
    border-radius: 15px;
  }

.img {
  height: 45px;
  width: 45px;
  margin-top: 5px;
}
<div class="container">
        
        <button  routerLink="/filtering" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/1.png" alt="filtering operation Icon" class="img"></button>
        <br>
        <button routerLink="/cleaning" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/2.png" alt="cleaning Icon" class="img"></button>
        <br>
        <button routerLink="/hood" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/3.png" alt="Hood Icon" class="img"></button>
        <br>
        <button routerLink="/?" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/4.png" alt="archive Icon" class="img"></button>
        <br>
        <button routerLink="/?" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                style="align-content: center;"
                [class.btn-nav]="!link.isActive"><img src="/assets/icons/5.png" alt="Menu Icon" class="img"></button>
        <br>
        <button routerLink="/home" 
                routerLinkActive="active-link"
                #link="routerLinkActive"
                class="btn-nav"
                [class.btn-nav]="!link.isActive">home</button>
        <br>
</div>
TRY发布堆栈BLITZ代码在发布角度问题时,代码片段似乎没有工作!Stanley

回答 1

  1. 赞同 1

    掠夺[class.btn-nav]="!link.isActive"每个按钮或添加margin: 11px;.active-link 'Class。然后它应该工作:

    <button  routerLink="/filtering" 
          routerLinkActive="active-link"
          #link="routerLinkActive"
          class="btn-nav"
          style="align-content: center;">
       <img src="/assets/1.jpg" alt="filtering operation Icon" class="img"> 
    </button>
    

    filtering cleaning

    g-unit