Question 414985 in CSS Question posted in
Some basic documentation can be found here.

Css – Underline the selected navitem after open link in new tab

I have a navbar that the selected/active navitem is recognizable by an orange underline. However, when I open another navitem in a new tab (by rightclick), the default navitem is underlined and not the selected one!

Here is my navbar:

<div>
  <ul>
    <a routerLink="/home">
      <button class="active" data-bs-toggle="tab">
        Home
      </button>
    </a>
    <a routerLink="/newTab">
      <button data-bs-toggle="tab">
        New Tab
      </button>
    </a>
  </ul>
<div>

and .scss:

.active {
    border-bottom-color: #f48024!important;    
}

I understand the home tab has active class by default, but is there anyway to catch which tab was selected in the previous tab?

Thank you in advance.

Tags:

2

Answers


  1. 0

    Don’t use

    class="active"

    Instead bind it to a variable which is read during initialization.
    You can read path using

    window.location.href
    Login or Signup to reply.
  2. 0

    You should use routerLinkActive attribute which take in an input of the class name and automatically adds the class to the active route.

    <div>
  <ul>
    <a routerLink="/home" routerLinkActive="active">
      <button data-bs-toggle="tab">
        Home
      </button>
    </a>
    <a routerLink="/newTab" routerLinkActive="active">
      <button data-bs-toggle="tab">
        New Tab
      </button>
    </a>
  </ul>
<div>

    Then you can update the CSS to:

    .active > button {
    border-bottom-color: #f48024!important;    
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search