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>

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

1 个答案: