首頁猿問 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>