Tabs问题

Question

我需要帮助处理标签。当选择第一个按钮时，背景颜色是灰色的，第一个按钮中的文本是白色的，可以，但是在我的第二个按钮上，背景颜色是灰色的，文本是白色的。我想给第二个按钮添加灰色文本颜色吗？

HTML：

<button class="tablink" id="defaultOpen" onclick="openPage('Home', this, '#6D6E70')">First Button</button>
<button class="tablink" onclick="openPage('News', this, '#6D6E70')">Second Button</button>

<div id="Home" class="tabcontent">
  <h3>Home</h3>
  <p>Home is where the heart is..</p>
</div>

<div id="News" class="tabcontent">
  <h3>News</h3>
  <p>Some news this fine day!</p>
</div>

CSS：

.tablink {
  display: inline-block;
    min-width: 128px;
    font-size: 16px;
    padding: 8px;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    background-color: #F2F2F2;
}

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: white;
  display: none;
  padding: 100px 20px;
  height: 100%;

}

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>

我尝试在document.getElementsByClassName("tablink")中添加java脚本代码。

tablinks[i].style.color = "#fff";

但不起作用

Answer 1

如果要在单击后更改第二个按钮文本颜色，只需添加以下一行：

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

这是JSfiddle。

但是，您最好使用CSS正确地按照您想要的方式对这些元素进行样式设置。如果你需要进一步的帮助，请告诉我。

编辑：

既然你已经清除了你想要达到的目标，解决你的问题的最好方法就是通过切换课程来解决问题。这是JSfiddle。

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

HTML：

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

CSS：

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

缩短了你的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中。