javascript - 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;
}

<button class="tablink selected" onclick="openPage('Home', this)">1 Button</button>
<button class="tablink" onclick="openPage('News', this)">2 Button</button>
<button class="tablink" onclick="openPage('About', this)">3 Button</button>

<div id="Home" class="tabcontent visible">
  <h3>Home</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <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>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>

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

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <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>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <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">
  <h3>News</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <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>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <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">
  <h3>About</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <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>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <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>
  <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>

Answer 1

给出按钮 ID。然后使用 document.getElementById() 将该按钮作为 openPage() 的第二个参数提供。

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

<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">
  <h3>Home</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <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>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>

  <button class="tablink" onclick="openPage('About', document.getElementById('aboutbutton'))">Go to About</button>

  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <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>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <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">
  <h3>News</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <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>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <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">
  <h3>About</h3>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <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>
  <p>sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, </p>
  <p>vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula </p>
  <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>
  <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>