首页猿问 javascript...

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

Html5

米琪卡哇伊 2023-09-11 16:29:03

我在文章示例“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;}

查看完整描述

1 回答

慕妹3146593

TA贡献1820条经验获得超9个赞

给出按钮 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>

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