Javascript 标签的问题

我需要关于标签的帮助。当选择第一个按钮时，第一个按钮的背景色是灰色，第一个按钮中的文本是白色，这没问题，但在我的第二个按钮上，背景色是灰白色，文本是白色。我想给第二个按钮添加灰色文本颜色

HTML:

Java脚本：

<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;

}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

函数openPage（页面名、elmnt、颜色）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

我尝试在

document.getElementsByClassName（“tablink”）

tablinks[i].style.color=“#fff”

但不起作用
如果要在单击第二个按钮后更改其文本颜色，只需添加以下行：

if (pageName === 'News') {
  elmnt.style.color = 'black';
}

给你

不过，您最好使用CSS以您想要的方式正确设置这些元素的样式。
如果你需要进一步的帮助，请告诉我


编辑：

既然你想要达到的目标已经被明确了，那么解决问题的最好方法就是切换课程。给你

基本上，我添加了两个额外的类
。selected
，和
visible
，一个用于按钮，另一个用于div，如下所示：

HTML:

并缩短了您的JS代码：

function openPage(pageName, elmnt) {
  document.querySelector('.tablink.selected').classList.remove('selected');
  elmnt.classList.add('selected');

  document.querySelector('.tabcontent.visible').classList.remove('visible');
  document.getElementById(pageName).classList.add('visible');
}

因此，无论何时单击，它都会查找选定的/可见的元素，删除这些额外的类，并将它们添加回已按下的按钮和与之对应的div。
在html代码中，两个按钮的背景色都相同。现在我发现我忘了在html代码中添加div id“Home”和id“News”以及文本，现在我添加了@coldark。问题是，我需要在选择第一个按钮时，另一个按钮的文本为灰色，当选择第二个按钮时，第一个按钮的文本为灰色，请查看：@Coldark@JacobStuard我已经更新了我的答案，希望这有帮助。@JacobStuard不客气，伙计。您甚至可以在
if（elmnt.classList.contains（'selected'））{/*代码的其余部分*/}
中包装函数中的所有内容，以防止在按同一个按钮两次时它执行任何操作，这将提高性能。
if (pageName === 'News') {
  elmnt.style.color = 'black';
}

<button class="tablink selected" onclick="openPage('Home', this)">First Button</button>
/* ... */
<div id="Home" class="tabcontent visible">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
</div>

.tablink.selected {
  color: #fff;
  background-color: #6D6E70;
}
.tabcontent.visible {
  display: block;
}

function openPage(pageName, elmnt) {
  document.querySelector('.tablink.selected').classList.remove('selected');
  elmnt.classList.add('selected');

  document.querySelector('.tabcontent.visible').classList.remove('visible');
  document.getElementById(pageName).classList.add('visible');
}