使用上一个/下一个按钮时更改活动标签的颜色

Question

I have a page where I am using W3 CSS tabs to open different pages by months. When the tabs are clicked the relative page opens and the tab turns to red to show it is active. I have added to the bottom of the pages previous/next month buttons. When clicked these work fine and take you to the previous or next month but the tab does not change colour at the top of the page to show it is active. How can I get the tab bar to also change colour when the buttons are used instead of the tab bar?

This is the tab bar code:

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

Buttons are :

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

The JavaScript is :

 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

I changed your code a bit. See the code snippet below:

 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>