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

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

  •  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}"

    推荐文章