我需要将下拉按钮链接下拉(锚标记)和导航后,点击一个特定的下拉选项。在Angular 。
这是我的导航栏。导航栏css属性没有正确分配(当我悬停在此按钮上时,蓝色下划线没有显示)
我使用了角形材料(Mat Button组件)。
.matButton
{
outline: none;
box-shadow:none;
font-size: 25px;
color:#c9ced1;
font-weight: normal;
background-color: #46484a;
}
.navbar {
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border-bottom: 3px solid transparent;
}
.navbar a:hover {
border-bottom: 3px solid rgb(70, 172, 219);
}
.navbar a.active {
border-bottom: 3px solid rgb(70, 172, 219);
}
<div id="app">
<nav class="navbar navbar-expand navbar-light" style="background-color:white">
<ul class="navbar-nav mr-auto" routerLinkActive="active">
<li class="nav-item" *ngIf="isLoggedIn && showAdminBoard">
<a href="/catalog" class="nav-link" routerLink="catalog" >
<div class="Nav-text-size">Catalog</div>
</a>
</li>
<li class="nav-item" *ngIf="isLoggedIn && showAdminBoard">
<a href="/admin" class="nav-link" routerLink="admin">
<div class="Nav-text-size">Data Portal</div>
</a>
</li>
<li class="nav-item" *ngIf="isLoggedIn && !showAdminBoard">
<a href="/user" class="nav-link" routerLink="user">
<div class="Nav-text-size">Data Portal</div>
</a>
</li>
<li class="nav-item" *ngIf="isLoggedIn">
<button mat-menu-item class="customize" [matMenuTriggerFor]="appMenu">Canary Access</button>
<mat-menu #appMenu="matMenu">
<a mat-menu-item href="/pendingasks" routerLink="canarypendingasks"><b>Pending</b></a>
<a mat-menu-item href="/granted" routerLink="canarygrantedasks"><b>Granted</b></a>
</mat-menu>
</li>
<li class="nav-item" *ngIf="isLoggedIn && showAdminBoard">
<a href="/s3bucketlists" class="nav-link" routerLink="s3buckets">
<div class="Nav-text-size">S3Bucket Access</div>
</a>
</li>
<li class="nav-item" *ngIf="isLoggedIn && showAdminBoard">
<a href="/requestsadmin" class="nav-link" routerLink="requestsadmin">
<div class="Nav-text-size">Admin</div>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto" *ngIf="!isLoggedIn">
<li class="nav-item">
<button type="button" class="btn btn-outline-primary" (click)="login()">Login</button>
</li>
</ul>
<ul class="navbar-nav ml-auto" *ngIf="isLoggedIn">
<li class="nav-item">
<a href="/home" class="nav-link" routerLink="user">
<div class="Nav-text-size">Hi {{ username }} </div>
</a>
</li>
<li class="nav-item">
<button type="button" class="btn btn-outline-danger btn-lg" (click)="logout()">Logout</button>
</li>
</ul>
</nav>
<!-- <hr class="line"> -->
<div>
<router-outlet></router-outlet>
</div>
</div>
我试过这个。
<li class="nav-item" *ngIf="isLoggedIn">
<button mat-menu-item [matMenuTriggerFor]="appMenu">Canary Access</button>
<mat-menu #appMenu="matMenu">
<a mat-menu-item href="/pendingasks" routerLink="canarypendingasks"><b>Pending</b></a>
<a mat-menu-item href="/granted" routerLink="canarygrantedasks"><b>Granted</b></a>
</mat-menu>
</li>
image 1
image 2
如果我悬停在其他导航栏选项,蓝线会出现。它不仅仅出现在金丝雀通道上,因为那是一个按钮。其他三个是锚标签。
帮助我将此按钮转换为定位标记。
image 3
1条答案
按热度按时间7tofc5zh1#
第一步:删除每个href。原因是here
第二步:尝试更改routerLink的值,直到它工作为止:
加纳利
/可以挂起任务
/待决问题
待定