代码之家 › 专栏 › 技术社区 › Rupesh

在角度4中更改选定链接的颜色[复制]

css3 html5 angular

0

Rupesh · 技术社区 · 7 年前

我用bootstrap 4制作了一个头部,但是我想当我点击任何链接时,链接会改变它的颜色并保持选中状态。

<nav>
    <div class="collapse navbar-collapse justify-content-end" id="nav-content">
        <ul class="navbar-nav" id="nav">
          <li class="nav-item">
            <a class="nav-link" routerLink="">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/experience">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/skills">Skills</a>
          </li>
        <ul>
     <div>
<nav>

请帮帮我。

2 回复 | 直到 7 年前

1

5

Krishna Rathore 7 年前

你可以用 routerLinkActive

.html file

<nav>
    <div class="collapse navbar-collapse justify-content-end" id="nav-content">
        <ul class="navbar-nav" id="nav">
          <li class="nav-item">
            <a class="nav-link" routerLink="" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/experience" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/skills" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">Skills</a>
          </li>
        <ul>
     <div>
<nav>

.class-name{
    color:red;
    ...
}

2

4

dAxx_ 7 年前

你应该用 路由器链接活动

<a class="nav-link" routerLink="/experience" 
   routerLinkActive="YourClass" routerLinkActiveOptions="{exact:true}">
    Experience
</a>

routerLinkActive -分配你的班级。
routerLinkActiveOptions="{exact:true}"