Setting the selected tab at the page start among 3 tabs-CodePudding

There are 3 tabs that I switch between. When I click on one, the text color becomes black and underlined. Others' text color is gray and the underline has been removed. How can I make the "all" tab selected when the page opens, that is, how can I make it black and underlined at the beginning?

.publisher-tab {
  background-color: rgb(255, 255, 255) !important;
  color: #B3B3B3;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  border-radius: 10px 0 0 0;
  border: none;
}

.publisher-tab:hover {
  color: black;
  text-decoration: underline 4px;
}

.supporter-tab {
  background-color: rgb(255, 255, 255) !important;
  color: #B3B3B3;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  border: none;
}

.supporter-tab:hover {
  color: black;
  text-decoration: underline 4px;
}

.supporter-tab1 {
  background-color: rgb(255, 255, 255) !important;
  color: #B3B3B3;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  border-radius: 0 10px 0 0;
  border: none;
}

.supporter-tab1:hover {
  color: black;
  text-decoration: underline 4px;
}

<ul  id="myTab" role="tablist">
  <li style="width: 18%;">
    <a  id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="all" aria-selected="true">All</a>
  </li>
  <li style="width: 18%;">
    <a  id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="false">VIP</a>
  </li>
  <li style="width: 18%;">
    <a  id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Normal</a>
  </li>
</ul>

CodePudding user response：

Just add new class publisher-tab-hover with style of hover tab and add that class to element on click.

.publisher-tab {
    background-color: rgb(255, 255, 255) !important;
    color: #b3b3b3;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    border-radius: 10px 0 0 0;
    border: none;
}

.publisher-tab-hover {
    color: black !important;
    text-decoration: underline 4px !important;
}

.publisher-tab:hover {
    color: black;
    text-decoration: underline 4px;
}

.supporter-tab {
    background-color: rgb(255, 255, 255) !important;
    color: #b3b3b3;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    border: none;
}

.supporter-tab:hover {
    color: black;
    text-decoration: underline 4px;
}

.supporter-tab1 {
    background-color: rgb(255, 255, 255) !important;
    color: #b3b3b3;
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    border-radius: 0 10px 0 0;
    border: none;
}

.supporter-tab1:hover {
    color: black;
    text-decoration: underline 4px;
}

<ul  id="myTab" role="tablist">
    <li style="width: 18%;">
      <a  id="all-tab" data-toggle="tab" href="#all" role="tab"
        aria-controls="all" aria-selected="true">All</a>
    </li>
    <li style="width: 18%;">
      <a  id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
        aria-selected="false">VIP</a>
    </li>
    <li style="width: 18%;">
      <a  id="profile-tab" data-toggle="tab" href="#profile" role="tab"
        aria-controls="profile" aria-selected="false">Normal</a>
    </li>

  </ul>

  <script>
    let a = document.querySelectorAll("#myTab a");

    let allEl = [];
    a.forEach((el, index) => {
      allEl.push(el);
      el.addEventListener("click", () => {
        allEl.forEach((el2) => el2.classList.remove("publisher-tab-hover"))
        el.classList.add("publisher-tab-hover");
      })
    })
  </script>