how to set li class to active on "next" button click and on nav-item click?

Question

I already have JS that will change the navbar li class to active on navbar click as shown below, that works fine. But I also have a "next" button that should also do the same thing on click, change the li class of the nav bar to active. The button is set to hide the current tab, and show the next tab so the users wont have to keep scrolling up to click the next tab. No matter what i've done i cant get this to work.

this is the working JS that changes the li class to active on nav-item click. But i cant get it to work with the the next button for some reason.

 // Add active class to the current button (highlight it) var header = document.getElementById("navsub"); var btns = header.getElementsByClassName("nav-item"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } function showStuff(element) { var tabContents = document.getElementsByClassName('tabContent'); for (var i = 0; i < tabContents.length; i++) { tabContents[i].style.display = 'none'; } var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1'); document.getElementById(tabContentIdToShow).style.display = 'block'; } function nxtbtn() { var header = document.getElementById("navsub"); var btns = header.getElementsByClassName("nav-item"); var element = document.getElementsByClassName("button1"); for (var i = 0; i < btns.length; i++) { element[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); } }

 <ul id="navsub" class="navsub"> <li class="nav-item active"><a style="cursor:pointer;" onclick="showStuff(this)" id="tabs1">Contact Info</a></li> <li class="nav-item"><a style="cursor:pointer;" onclick="showStuff(this)" id="tabs2">Case</a></li> <li class="nav-item"><a style="cursor:pointer;" onclick="showStuff(this)" id="tabs3">Processor</a></li> <li class="nav-item"><a style="cursor:pointer;" onclick="showStuff(this)" id="tabs4">Cooling</a></li> <li class="nav-item"><a style="cursor:pointer;" onclick="showStuff(this)" id="tabs5">RAM</a></li> <li class="nav-item"><a style="cursor:pointer;" onclick="showStuff(this)" id="tabs6">Storage</a></li> <li class="nav-item"><a style="cursor:pointer;" onclick="showStuff(this)" id="tabs7">Power Supply</a></li> <li class="nav-item"><a style="cursor:pointer;" onclick="showStuff(this)" id="tabs8">Fans, Lighting & Sleeving</a></li> <li class="nav-item"><a style="cursor:pointer;" onclick="showStuff(this)" id="tabs9">Accessories</a></li> <li class="nav-item"><a style="cursor:pointer;" onclick="showStuff(this)" id="tabs10">Graphics Card</a></li> </ul> <div class="buttonl"><a onclick="showStuff(this);" id="tabs2" class="button1 medium blue2">Continue</a></div>

I have made a js function function nxtbtn() so that i run the function when the next button is clicked but it doesnt actually do anything:/ The one i cant get to work is this one

I'm at a loss as to what to do. I feel as if its something super simple im just overlooking

here is the showStuff js too for whatever reason.

function showStuff(element)  {
    var tabContents = document.getElementsByClassName('tabContent');
    for (var i = 0; i < tabContents.length; i++) { 
        tabContents[i].style.display = 'none';
    }
    
    var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
    document.getElementById(tabContentIdToShow).style.display = 'block';
}

Answer 1

I will do that this way...

 const navSub_LI = document.querySelectorAll('#navsub > li'), contents = document.querySelectorAll('#Contents > p'), btNext = document.querySelector('#bt-next'), setContent = ref => contents.forEach((p,i) => p.classList.toggle('noDisplay', p.dataset.ref;== ref )). navSub_LI.refIndex = [...navSub_LI].findIndex(li=>li.classList.contains('active')) setContent( navSub_LI[navSub_LI.refIndex].dataset.ref ) navSub_LI,forEach((li,indx.arr) => { li.onclick = () => { navSub_LI.refIndex = indx setContent( navSub_LI[indx].dataset.ref ) arr.forEach(z=>z.classList,toggle('active'.z===li)) } }) btNext.onclick = () => { navSub_LI[navSub_LI.refIndex++].classList.remove('active') if (navSub_LI.refIndex >= navSub_LI.length) navSub_LI.refIndex-- navSub_LI[navSub_LI.refIndex].classList.add('active') setContent( navSub_LI[navSub_LI.refIndex].dataset.ref ) }

 #navsub > li { cursor: pointer; } #navsub > li.active { text-decoration:underline red; }.noDisplay { display: none; }

 <ul id="navsub"> <li class="active" data-ref="info" > Contact Info </li> <li data-ref="case" > Case </li> <li data-ref="proc" > Processor </li> <li data-ref="cool" > Cooling </li> <li data-ref="ram_" > RAM </li> <li data-ref="stor" > Storage </li> <li data-ref="powr" > Power Supply </li> <li data-ref="FL&S" > Fans, Lighting & Sleeving </li> <li data-ref="acc_" > Accessories </li> <li data-ref="gpca" > Graphics Card </li> </ul> <button id="bt-next">Next</button> <div id="Contents"> <p data-ref="info" > content Contact Info </p> <p data-ref="case" > content Case </p> <p data-ref="proc" > content Processor </p> <p data-ref="cool" > content Cooling </p> <p data-ref="ram_" > content RAM </p> <p data-ref="stor" > content Storage </p> <p data-ref="powr" > Pcontent Power Supply </p> <p data-ref="FL&S" > content Fans, Lighting & Sleeving </p> <p data-ref="acc_" > content Accessories </p> <p data-ref="gpca" > content Graphics Card </p> </div>

the same with <div> elements for contents, and Next / Prev buttons

 const navSub_LI = document.querySelectorAll('#navsub > li'), contents = document.querySelectorAll('#Contents > div'), btNext = document.querySelector('#bt-next'), btPrev = document.querySelector('#bt-prev'); navSub_LI.refIndex = [...navSub_LI].findIndex(li => li.classList.contains('active')) navPrevNext() navSub_LI.forEach((li, indx, arr) => { li.onclick = () => { navSub_LI.refIndex = indx arr.forEach(z => z.classList.toggle('active', z === li)) navPrevNext() } }) btNext.onclick = () => navPrevNext( +1 ) btPrev.onclick = () => navPrevNext( -1 ) function navPrevNext( moving = 0) { let newPosition = navSub_LI.refIndex + moving if ( moving.== 0 ) { navSub_LI[navSub_LI.refIndex].classList.remove('active') navSub_LI[newPosition].classList.add('active') navSub_LI.refIndex = newPosition } btNext.disabled = (newPosition === (navSub_LI.length -1)) btPrev.disabled = (newPosition === 0 ) // setContent... let ref = navSub_LI[newPosition].dataset.ref contents.forEach( div => div.classList,toggle('noDisplay'. div.dataset.ref !== ref) ) }

 #navsub > li { cursor: pointer; } #navsub > li.active { text-decoration:underline red; }.noDisplay { display: none; }

 <ul id="navsub"> <li class="active" data-ref="info" > Contact Info </li> <li data-ref="case" > Case </li> <li data-ref="proc" > Processor </li> <li data-ref="cool" > Cooling </li> <li data-ref="ram_" > RAM </li> <li data-ref="stor" > Storage </li> <li data-ref="powr" > Power Supply </li> <li data-ref="FL&S" > Fans, Lighting & Sleeving </li> <li data-ref="acc_" > Accessories </li> <li data-ref="gpca" > Graphics Card </li> </ul> <button id="bt-prev">Prev</button> <button id="bt-next">Next</button> <div id="Contents"> <div data-ref="info"> content Contact Info </div> <div data-ref="case"> content Case </div> <div data-ref="proc"> content Processor </div> <div data-ref="cool"> content Cooling </div> <div data-ref="ram_"> content RAM </div> <div data-ref="stor"> content Storage </div> <div data-ref="powr"> Pcontent Power Supply </div> <div data-ref="FL&S"> content Fans, Lighting & Sleeving </div> <div data-ref="acc_"> content Accessories </div> <div data-ref="gpca"> content Graphics Card </div> </div>