javascript 将类添加到选项卡时出现问题

Question

我在文章示例“Home”div 中的按钮有问题，我主要在 div id“Home”中添加一个按钮，请参阅：

<div id="Home" class="tabcontent visible">

<h3>Home</h3>

<p>TEXT</p>

<button class="tablink" onclick="openPage('About', this)">Go to About</button>

<p>TEXT</p>

我希望当用户单击该按钮“转到关于”时打开页面（部分）“关于”并且我看到的问题是，当用户单击该按钮时，页面打开得很棒，但按钮不是深灰色，我尝试添加 JavaScript什么时候单击该按钮“转到关于”打开页面，“关于”按钮部分需要为深灰色，但对我不起作用。我试试这个：

<button class="tablink" onclick="openPage('About', this); myscript()">Go to About</button>

<script>

function myscript(){

elmnt.classList.add('selected');

}

</script>

现在，当用户单击该按钮“转到关于”时，“关于”按钮不是黑灰色的。

查看完整代码：

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');

}

tablink {

  display: inline-block;

  min-width: 128px;

  font-size: 16px;

  padding: 8px;

  color: #6D6E70;

  font-weight: 500;

  text-decoration: none;

  background-color: #F2F2F2;

}

.tablink.selected {

  color: #fff;

  background-color: #6D6E70;

}

.tablink:hover {

  background-color: #777;

  color: #fff;

}

/* Style the tab content (and add height:100% for full page content) */

.tabcontent {

  color: black;

  display: none;

  padding: 100px 20px;

  height: 100%;

}

.tabcontent.visible {

  display: block;

}

Answer 1

给出按钮 ID。然后使用document.getElementById()提供该按钮作为 的第二个参数openPage()。function openPage(pageName, elmnt) {&nbsp; document.querySelector('.tablink.selected').classList.remove('selected');&nbsp; elmnt.classList.add('selected');&nbsp; document.querySelector('.tabcontent.visible').classList.remove('visible');&nbsp; document.getElementById(pageName).classList.add('visible');}tablink {&nbsp; display: inline-block;&nbsp; min-width: 128px;&nbsp; font-size: 16px;&nbsp; padding: 8px;&nbsp; color: #6D6E70;&nbsp; font-weight: 500;&nbsp; text-decoration: none;&nbsp; background-color: #F2F2F2;}.tablink.selected {&nbsp; color: #fff;&nbsp; background-color: #6D6E70;}.tablink:hover {&nbsp; background-color: #777;&nbsp; color: #fff;}/* Style the tab content (and add height:100% for full page content) */.tabcontent {&nbsp; color: black;&nbsp; display: none;&nbsp; padding: 100px 20px;&nbsp; height: 100%;}.tabcontent.visible {&nbsp; display: block;}<button id="homebutton" class="tablink selected" onclick="openPage('Home', this)">1 Button</button><button id="newsbutton" class="tablink" onclick="openPage('News', this)">2 Button</button><button id="aboutbutton" class="tablink" onclick="openPage('About', this)">3 Button</button><div id="Home" class="tabcontent visible">&nbsp; <h3>Home</h3>&nbsp; <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>&nbsp; <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>&nbsp; <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>&nbsp; <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>&nbsp; <button class="tablink" onclick="openPage('About', document.getElementById('aboutbutton'))">Go to About</button>&nbsp; <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>&nbsp; <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>&nbsp; <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>&nbsp; <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p></div><div id="News" class="tabcontent">&nbsp; <h3>News</h3>&nbsp; <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>&nbsp; <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>&nbsp; <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>&nbsp; <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p></div><div id="About" class="tabcontent">&nbsp; <h3>About</h3>&nbsp; <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>&nbsp; <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>&nbsp; <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>&nbsp; <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>&nbsp; <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>&nbsp; <p>eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, </p>&nbsp; <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p></div>