Question

我使用引导程序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>

我不知道下一步该怎么做，我不想使用jquery。

请帮助我。

Answer 1

您应该使用 RouterLinkActive

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

routerLinkActive-分配课程。
routerLinkActiveOptions="{exact:true}"-在完全匹配的链接中添加课程

Answer 2

您可以使用In [5]: DF Out[5]: Index R 0 0 A 1 1 "B,C" 2 2 D 3 3 "E,F" In [6]: DF.loc[DF['R'].str.startswith('"'), 'R'] = DF['R'].str[1:] In [7]: DF.loc[DF['R'].str.endswith('"'), 'R'] = DF['R'].str[:-1] In [8]: DF Out[8]: Index R 0 0 A 1 1 B,C 2 2 D 3 3 E,F

routerLinkActive

.html file

.css / .scss文件

<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>

更改角度4中选定链接的颜色

2 个答案: