(JavaScript) 如何在選項卡中添加上一個和下一個按鈕？

Question

希望大家有一個美好的一天，周末快樂！

我想問一下在我的標簽中添加上一個和下一個按鈕。 我已經添加了它，其中包含一些引用此https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow的 JavaScript。

我知道用輪播引用選項卡有點奇怪，但我認為原理是一樣的。 但在我的代碼中，我不知道如何編碼。 我很抱歉，因為我對 JavaScript 非常陌生。 所以，這是我的嘗試：

 //Add & remove class tab, contents, & menu on click window.addEventListener('DOMContentLoaded', ()=> { let tabs = document.querySelectorAll('.tab'); let content = document.querySelectorAll('.content'); let prev = document.querySelector('.previous'); let next = document.querySelector('.next'); let firstTab = function(tabs) {tabs.classList.add('tab-active')}; let firstContent = function(content) {content.classList.add('content-active')}; firstTab(tabs[0]); firstContent(content[0]); for (let i = 0; i < tabs.length; i++) { tabs[i].addEventListener('click', () => tabClick(i)); } prev.addEventListener('click', (i) => tabClick(i - 1)); next.addEventListener('click', (i) => tabClick(i + 1)); function tabClick(currentTab) { removeActive(); //Add Active Class tabs[currentTab].classList.add('tab-active'); content[currentTab].classList.add('content-active'); } function removeActive() { for (let i = 0; i < tabs.length; i++) { //Remove Active Class content[i].classList.remove('content-active'); content[i].classList.add('content-show'); setTimeout(function() { content[i].classList.remove('content-show'); },1500); tabs[i].classList.remove('tab-active'); } } })

 /* WHOLE CONTAINER */ .container { width: 96vw; height: 96vh; } /* TABS */ .tabs { display: flex; height: 50px; overflow: hidden; align-items: center; justify-content: center; width: 100%; } .tab { font-size: 14px; padding: 5px 10px; cursor: pointer; letter-spacing: 2px; } #red.tab-active {background-color: rgb(245, 66, 66);} #blue.tab-active {background-color: rgb(66, 135, 245);} #yellow.tab-active {background-color: rgb(245, 215, 66);} #green.tab-active {background-color: rgb(56, 235, 98);} #cyan.tab-active {background-color: rgb(79, 247, 219);} /* TAB CONTENTS */ .contents { width: 100%; margin-top: 5px; height: 80%; } .content { width: 96%; height: 80%; display: none; padding: 0; margin: 0; border: none; position: absolute; } .content-show { display: flex; animation-name: fade-out; animation-duration: 2.5s; } @keyframes fade-out { 0% { opacity: 1; display: flex; } 99% { opacity: 0; display: flex; } 100% { opacity: 0; display: none; } } .content-active { display: flex; border: none; justify-content: center; animation-name: fade-in; animation-duration: 2.5s; } @keyframes fade-in { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0.01; } 100%{ display: block; opacity: 1; } } #red.content-active {background-color: rgb(245, 66, 66);} #blue.content-active {background-color: rgb(66, 135, 245);} #yellow.content-active {background-color: rgb(245, 215, 66);} #green.content-active {background-color: rgb(56, 235, 98);} #cyan.content-active {background-color: rgb(79, 247, 219);} /* BUTTON PREVIOUS NEXT */ .button { position: absolute; top: 49%; z-index: 4; } .previous, .next { margin: 5px 10px; letter-spacing: 2px; background-color: white; font-size: 14px; text-align: center; padding: 5px; cursor: pointer; }

 <div class="container"> <div class="tabs"> <div id="red" class="tab">RED</div> <div id="blue" class="tab">BLUE</div> <div id="yellow" class="tab">YELLOW</div> <div id="green" class="tab">GREEN</div> <div id="cyan" class="tab">CYAN</div> </div> <div class="contents"> <div id="red" class="content"></div> <div id="blue" class="content"></div> <div id="yellow" class="content"></div> <div id="green" class="content"></div> <div id="cyan" class="content"></div> </div> <div class="button"> <div class="previous">PREV</div> <div class="next">NEXT</div> </div> </div>

請幫我解決這個代碼家伙。 非常感謝。

Answer 1

您面臨的唯一問題是，當您單擊上一個或下一個按鈕時，您在 tabClick 函數中傳遞了參數 i 但 i 不是索引，而是單擊事件的屬性。

這就是你所做的👇

prev.addEventListener('click', (i) => tabClick(i - 1));
next.addEventListener('click', (i) => tabClick(i + 1));

這里 i 代表 click 的屬性和你點擊的元素，所以它沒有給出索引。

你寧願做的是：

• 創建一個名為 activeTab 的全局變量並將默認值設置為 0。
• 在 tabClick 函數中將 activeTab 設置為 currentTab 為activeTab = currentTab
• 現在，在 prev 函數里面寫tabClick(actie - 1)
• 下一個功能也一樣。

這是我的代碼👇

//Add & remove class tab, contents, & menu on click
window.addEventListener('DOMContentLoaded', ()=> {
    let tabs = document.querySelectorAll('.tab');
    let content = document.querySelectorAll('.content');
    let prev = document.querySelector('.previous');
    let next = document.querySelector('.next');
    let firstTab = function(tabs) {tabs.classList.add('tab-active')};
    let firstContent = function(content) {content.classList.add('content-active')};

    let actieTab = 0;
  
    firstTab(tabs[0]);
    firstContent(content[0]);
        
        for (let i = 0; i < tabs.length; i++) {            
            tabs[i].addEventListener('click', () => tabClick(i));
        }

        prev.addEventListener('click', () => tabClick(activeTab - 1));
        next.addEventListener('click', () => tabClick(activeTab + 1));

        
        function tabClick(currentTab) {
          removeActive();
            //Add Active Class
            tabs[currentTab].classList.add('tab-active');
            content[currentTab].classList.add('content-active');
            activeTab = currentTab
        }  
        function removeActive() {
          for (let i = 0; i < tabs.length; i++) {
            //Remove Active Class
            content[i].classList.remove('content-active');
            content[i].classList.add('content-show');
            setTimeout(function() {
              content[i].classList.remove('content-show');
            },1500);
            tabs[i].classList.remove('tab-active');
          }
         }
       })

Answer 2

對於數組結束后沒有選擇類的問題，可以這樣做👇

• 添加一個代碼來檢查 activeTab 是否在數組的末尾。
• 如果是，我們將activeTab設置回0並調用函數tabClick並將activeTab傳入其中
• 如果不是，否則我們將做與之前相同的事情
• 上一個按鈕也是如此

代碼示例

prev.addEventListener("click", (i) => {
  if (activeTab === 0) {
    activeTab = tabs.length - 1;
    tabClick(activeTab);
  } else {
    tabClick(activeTab - 1);
  }
});
next.addEventListener("click", (i) => {
  if (activeTab >= tabs.length - 1) {
    activeTab = 0;
    tabClick(activeTab);
  } else {
    tabClick(activeTab + 1);
  }
});