为什么在不直接点击选项卡的情况下，它们没有显示为激活状态？

前端开发 2026-07-09

下面是标签页的CSS：

<html lang="en">
    <head>
     <style>

.tab button:hover {
  background-color: #ffb100;
}

.tab button.active {
  background-color: #ffb100;
}

        </style>
    </head>

HTML中的标签页与链接：

<div class="container">

          <div class="tab">
       <button class="tablinks" onclick="openCity(event, 'two')">Two</button>
       <button class="tablinks" onclick="openCity(event, 'three')">Three</button>
          </div>        

        <div id="one" class="tabcontent" style="display:none">
            (I'm one)
            <div class="arrowright" onclick="openCity(event, 'two')">arrowright</div>
        </div>

        <div id="two" class="tabcontent" style="display:none">
            (I'm two)
            <div class="arrowleft" onclick="openCity(event, 'one')">arrowleft</div>
            <div class="arrowright" onclick="openCity(event, 'three')">arrowright</div>
        </div>

        <div id="three" class="tabcontent" style="display:none">
            (I'm three)
            <div class="arrowleft" onclick="openCity(event, 'two')">arrowleft</div>
        </div>

    </div>

以及JavaScript函数：

<script>

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

document.body.addEventListener('DOMContentLoaded', openCity(event, 'one'));


</script>

解决方案

问题在于，当你点击图片时，evt.currentTarget 并不等同于 button，而是这个 img——因此它把 active 加到了图片上，而不是按钮上。

你可能需要在按钮上添加 ids（例如 "two_button"）。

<button id="two_button" class="tablinks" onclick="openCity(event, 'two')">Two</button>
<button id="three_button" class="tablinks" onclick="openCity(event,

并使用 getElementById() 来访问按钮以添加 active

document.getElementById(cityName+"_button").className += " active";

完整可运行的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.tab button:hover {
  background-color: #ffb100;
}
.tab button.active {
  background-color: #ffb100;
}
</style>
</head>

<body>
<div class="container">
    <div class="tab">
       <button id="two_button" class="tablinks" onclick="openCity(event, 'two')">Two</button>
       <button id="three_button" class="tablinks" onclick="openCity(event, 'three')">Three</button>
    </div>
    <div id="one" class="tabcontent" style="display:none">
        (I'm one)
        <div class="arrowright" onclick="openCity(event, 'two')">arrowright</div>
    </div>
    <div id="two" class="tabcontent" style="display:none">
        (I'm two)
        <div class="arrowleft" onclick="openCity(event, 'one')">arrowleft</div>
        <div class="arrowright" onclick="openCity(event, 'three')">arrowright</div>
    </div>

    <div id="three" class="tabcontent" style="display:none">
        (I'm three)
        <div class="arrowleft" onclick="openCity(event, 'two')">arrowleft</div>
    </div>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;

  // switch tabs
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  document.getElementById(cityName).style.display = "block";

  // switch links
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName+"_button").className += " active";
  //evt.currentTarget.className += " active";
  //evt.target.className += " active";
  //console.log(evt.currentTarget);
  //console.log(evt.target);
}
document.body.addEventListener('DOMContentLoaded', openCity(event, 'one'));
</script>

</body>
</html>

站内所有文章版权归属LeftHeroAI导航站，无授权禁止任何主体转载、抄袭、复制内容，亦不得私自架设镜像站点。一经侵权，本站将通过法律途径追责。