使用 vanilla JS 突出显示活动选项卡

我正在创建一个选项卡式导航栏，其中当选项卡处于活动状态时，它应该将其颜色更改为我设置的颜色。使用选项卡浏览页面效果很好，但活动选项卡上的颜色突出显示似乎不起作用。

到目前为止，这是我的代码：

HTML:

<section class="tab" id="active_Current_Tabs">
      <header>Active/Current Tabs</header>
      <nav class="navbar">
        <ul>
          <li class="btn currentTab" onclick="activeTab(event, 'lorem7')">TAB1</li>
          <li class="btn currentTab" onclick="activeTab(event, 'lorem8')">TAB2</li>
          <li class="btn currentTab" onclick="activeTab(event, 'lorem9')">TAB3</li>
        </ul>
      </nav>
      <main class="main-doc">
        <article class="selectedPage" id='lorem7'>
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, est?</p>
        </article>
        <article class="selectedPage" id="lorem8">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, est?</p>
        </article>
        <article class="selectedPage" id="lorem9">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, est?</p>
        </article>
      </main>
    </section>

CSS:

article {
  text-align: center;
  width: 100%;
  height: 300px;
  max-height: 300px;
  margin: 0;
}

/*navbar css*/

nav {
width: 100%;
height: 75px;
padding: 0;
margin: 0;
}

nav ul {
  height: 100%;
  padding: 0;
  display: flex;
  list-style: none;
  justify-content: space-around;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100%;
  background-color: #8b9d98;
  cursor: pointer;
  font-weight: 500;
}

.btn:hover {
  background-color: #d7e0e0;
  font-weight: 700;
  transition: .5s;
}

/*main css*/
main {
  margin-top: 0;
}


/*Active/Current Tab */

#lorem7 {
  display: flex;
  flex-direction: column;
  background-color: #49c2a4;
  align-items: center;
  justify-content: center;
}

#lorem8 {
  display: none;
  flex-direction: column;
  background-color:#35386f;
  align-items: center;
  justify-content: center;
}

#lorem9 {
  display: none;
  flex-direction: column;
  background-color:#e28968;
  align-items: center;
  justify-content: center;
}

JavaScript：

// active/current tab function

function activeTab(evnt, currPage) {
  var currenttab;
  var pages = document.getElementsByClassName('selectedPage');
  for (i = 0; i < pages.length; i++) {
    pages[i].style.display = "none";
  }
  //for dehighlighting inactive tabs
  currenttab = document.getElementsByClassName('currentTab');
  for(j = 0; j < currenttab.length; j++) {
    currenttab[j].className = currenttab[j].className.replace("green", " ");
  }
  document.getElementById(currPage).style.display = "flex";
  evnt.currentTarget.className += "green"; //this appends the color to active tab
}

请帮助！ T_T

我不确定你想对“绿色”类做什么，因为你的 CSS 中没有它的规则。我回答这个问题时假设您希望活动选项卡与活动页面的颜色相同。抱歉，如果这不是您的意图，但我认为这是有道理的。

为了避免特定类名出现问题，您可以使用 .classList 方法，例如“add”和“remove”。这样您就不必担心标记中类名的顺序。例子：

tabs[i].classList.remove('active')
e.currentTarget.classList.add('active')

您还可以动态附加事件侦听器（点击处理程序）以保持 HTML 整洁。例子：

for(j = 0; j < tabs.length; j++) {
    // attach event listener to all tabs
    tabs[j].addEventListener('click', clickTab)
}

您还可以通过将相似的样式分配给公共类来减少 CSS 的重复性：

.page {display:none;}
.page.active {
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

我修改了您的 ID，以便能够独立引用选项卡和页面，而无需将参数显式传递给单击处理程序函数。例子：

<li id="t2" class="tab">TAB2</li>
...
<article class="page" id="p2">...</article>

这是我的 JS Bin：

http://jsbin.com/defidih/edit?html,css,js,控制台,输出 http://jsbin.com/defidih/edit?html,css,js,console,output