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

Question

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

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

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

Answer 1

evnt.currentTarget.className += "green";

此行将添加到已存在的 class名称中。

所以你的 class class="btn currentTab" 变成 class="btn currentTabgreen" 而不是 class="btn currentTab green" 如果你之前没有给它添加绿色。所以最好使用 currenttab[j].className.replace("green", ""); 重置以前的绿色 classes 和 evnt.currentTarget.className += " green"; 设置新的绿色 class.

编辑：这确实意味着 class 名称每次都会保持增长 space。所以最好的办法是使用 classList.add() 和 classList.remove() 而不是手动编辑 class 字符串。

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
}

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;
}
.green {
  background-color: green;
}

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

Answer 2

我不确定您尝试使用 "green" class 做什么，因为您的 CSS 中没有相关规则。我假设您希望活动选项卡与活动页面颜色相同来回答这个问题。很抱歉，如果这不是您想要的，但我认为这是有道理的。

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

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

您还可以通过将相似的样式分配给常见的 class:

来减少您的 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,console,output

Answer 3

创建一个标签式导航栏，其中当标签处于活动状态时，它应该将其颜色更改为您设置的自定义颜色。你可以使用这几行香草 JavaScript.

JS:

var activeTab;
var acctOptions = document
  .querySelector(".account-options")
  .querySelectorAll("li");
acctOptions.forEach(option => {
  option.addEventListener("click", function() {
    if (activeTab) activeTab.classList.remove("active");
    activeTab = option;
    activeTab.classList.add("active");
  });
});

CSS:

.active {
  background: blue;
}

HTML:

<ul class="account-options">
   <li class='login'><a>Login</a></li>
   <li class='register'><a href="register.html">Register</a></li>
   <li class='account' ><a>My Account</a></li>
   <li class='reward-points'><a>Reward Points</a></li>
   <li class='password-reset'><a>Reset Password</a></li>
   <li class='logout'><a>Logout</a></li>
</ul>

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

highlighting an active tab with vanilla JS

html

javascript

css

dom-manipulation