使用上一個/下一個按鈕時更改活動標簽的顏色

Question

我有一個頁面，我在其中使用W3 CSS標簽按月打開不同的頁面。 單擊選項卡后，將打開相對頁面，並且選項卡將變為紅色以表明它處於活動狀態。 我已在上一頁/下個月按鈕的頁面底部添加了內容。 單擊這些按鈕后，效果很好，您可以轉到上一個月或下個月，但是該選項卡不會更改頁面頂部的顏色以表明它處於活動狀態。 當使用按鈕而不是標簽欄時，如何使標簽欄也改變顏色？

這是標簽條形碼：

<div class="w3-bar w3-black" >
<button  class="w3-bar-item w3-button tablink w3-red"  onclick="openNews(event,'MAY2018')">TOUKOKUU</button>
<button  class="w3-bar-item w3-button tablink"  onclick="openNews(event,'JUNE2018')">KESÄKUU</button>
<button  class="w3-bar-item w3-button tablink"  onclick="openNews(event,'JULY2018')">HEINÄKUU</button>
<button  class="w3-bar-item w3-button tablink"  onclick="openNews(event,'AUGUST2018')">ELOKUU</button>
<button  class="w3-bar-item w3-button tablink"  onclick="openNews(event,'SEPTEMBER2018')">SYYSKUU</button>

按鈕是：

<div class="w3-section" align="center">
<button class="w3-btn w3-white w3-border w3-border-red w3-round-large "  onclick="openNews(event,'MAY2018'), topFunction()" >❮ TOUKOKUU</button>
    <button class="w3-btn w3-white w3-border w3-border-red w3-round-large " onclick="openNews(event,'JULY2018'), topFunction()">HEINÄKUU ❯</button>
  </div>

JavaScript是：

 function openNews(evt, newsName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("news");
  for (i = 0; i < x.length; i++) {
  x[i].style.display = "none";
 }
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++) {
  tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(newsName).style.display = "block";
evt.currentTarget.className += " w3-red";
}

Answer 1

我更改了您的代碼。 請參見下面的代碼段：

 function openNews( newsName ) { var x = document.querySelectorAll( '.news' ), tablinks = document.querySelectorAll( '.tablink' ), index = 0; document.querySelector( '.w3-red' ).classList.remove( 'w3-red' ); document.querySelector( '.active' ).classList.remove( 'active' ); for ( var i = 0; i < x.length; i++ ) { if ( x[ i ].id == newsName ) index = i } x[ index ].classList.add( 'active' ); tablinks[ index ].classList.add( 'w3-red' ) } 

 .tablink { transition-duration: 400ms } .news { display: none; border-top: 6px solid #f44336 !important } .active { display: block } 

 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <div class="w3-container"> <div class="w3-bar w3-black" > <button class="w3-bar-item w3-button tablink w3-red" onclick="openNews('MAY2018')">TOUKOKUU</button> <button class="w3-bar-item w3-button tablink" onclick="openNews('JUNE2018')">KESÄKUU</button> <button class="w3-bar-item w3-button tablink" onclick="openNews('JULY2018')">HEINÄKUU</button> <button class="w3-bar-item w3-button tablink" onclick="openNews('AUGUST2018')">ELOKUU</button> <button class="w3-bar-item w3-button tablink" onclick="openNews('SEPTEMBER2018')">SYYSKUU</button> </div> <div id="MAY2018" class="w3-container w3-border news active"> <h2>MAY 2018</h2> <p>News for TOUKOKUU 2018</p> </div> <div id="JUNE2018" class="w3-container w3-border news"> <h2>JUNE 2018</h2> <p>News for KESÄKUU 2018</p> </div> <div id="JULY2018" class="w3-container w3-border news"> <h2>JULY 2018</h2> <p>News for HEINÄKUU 2018</p> </div> <div id="AUGUST2018" class="w3-container w3-border news"> <h2>AUGUST 2018</h2> <p>News for ELOKUU 2018</p> </div> <div id="SEPTEMBER2018" class="w3-container w3-border news"> <h2>SEPTEMBER 2018</h2> <p>News for SYYSKUU 2018</p> </div> </div> <div class="w3-section" align="center"> <button class="w3-btn w3-white w3-border w3-border-red w3-round-large" onclick="openNews('MAY2018')" >❮ TOUKOKUU</button> <button class="w3-btn w3-white w3-border w3-border-red w3-round-large" onclick="openNews('JULY2018')">HEINÄKUU ❯</button> </div>