使用 vanilla JS 突出显示活动选项卡 [英] highlighting an active tab with vanilla JS

问题描述

I am creating a tabbed navigation bar wherein when the tab is active it should change its color the color that i set it to change with.使用标签浏览页面工作正常，但活动标签上的颜色突出显示似乎不起作用.

I am creating a tabbed navigation bar wherein when the tab is active it should change its color the color that i set it to change with. Navigating thru the pages with the tabs works fine however the color highlight on the active tab just don't seem to work.

这是我目前的代码:

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:

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 中没有针对它的规则.我回答了这个问题，假设您希望活动选项卡与活动页面的颜色相同.抱歉，如果这不是您的意图，但我认为这是有道理的.

I'm not sure what you were trying to do with the "green" class because there were no rules for it in your CSS. I answered the question assuming you wanted the active tab to be the same color as the active page. Sorry if that's not what you intended, but I think it makes sense.

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

To avoid problems with specific class names, you can use .classList methods like "add" and "remove". This way you don't have to worry about the order of class names in the markup. Examples:

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

您还可以动态附加事件侦听器(单击处理程序)以保持 HTML 整洁.示例:

You can also attach your event listener (click handler) dynamically to keep your HTML uncluttered. Example:

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

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

You can also make your CSS less repetitive by assigning similar styles to a common class:

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

我修改了您的 ID，以便能够独立引用选项卡和页面，而无需向点击处理函数显式传递参数.示例:

I modified your IDs in order to be able to reference tabs and pages independently without explicitly passing parameters to the click handler functions. Example:

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

这是我的 JS Bin:

Here is my JS Bin:

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

这篇关于使用 vanilla JS 突出显示活动选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！