使用上一個/下一個按鈕導航div

我有一個我目前正在開發的小網站，我想要做的是通過上一個/下一個按鈕導航我的 div。我設法讓它從一個切換到另一個，但不知何故第三個 div 被忽略了，我不知道我錯過了什么。

這是我的代碼片段：

      var nextbtn = document.getElementById("next-btn");
      var previousbtn = document.getElementById("previous-btn");
      var div1 = document.getElementById("div1");
      var div2 = document.getElementById("div2");
      var div3 = document.getElementById("div3");
      
      var i = 0;
      nextbtn.addEventListener("click", function () {
        i  ;
        if (i == 1) {
          div1.style.display = "block";
          div2.style.display = "none";
          div3.style.display = "none";
        } else if (i == 2) {
          div1.style.display = "none";
          div2.style.display = "block";
          div3.style.display = "none";
        } else if (i == 3) {
          div1.style.display = "none";
          div2.style.display = "none";
          div3.style.display = "block";
        } else {
          console.log("you have reached the limit");
        }
      });

    body {
      display: flex;
      flex-wrap: wrap;
    }
    .div1,
    .div2,
    .div3 {
      width: 200px;
      height: 200px;
    }
    .div1 {
      display: block;
    }
    .div2,
    .div3 {
      display: none;
    }

    <div class="div1" id="div1" style="background-color: crimson">
      <button id="previous-btn">previous</button>
      <button id="next-btn">next</button>
    </div>

    <div class="div2" id="div2" style="background-color: rgb(20, 220, 87)">
      <button id="previous-btn">previous</button>
      <button id="next-btn">next</button>
    </div>

    <div class="div3" id="div3" style="background-color: rgb(113, 20, 220)">
      <button id="previous-btn">previous</button>
      <button id="next-btn">next</button>
    </div>

    <div class="buttons-controller">
      <button id="first-div">1</button>
      <button id="second-div">2</button>
      <button id="third-div">3</button>
    </div>

編輯：目前我只在“下一步”按鈕上作業，所以前一個按鈕不起作用。

uj5u.com熱心網友回復：

您不能擁有多個具有相同 ID 的元素，這就是它無法正常作業的原因。

var nextbtn = document.getElementById("next-btn");
var previousbtn = document.getElementById("previous-btn");
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");

var i = 0;
nextbtn.addEventListener("click", function() {
  i  ;
  if (i == 1) {
    div1.style.display = "none";
    div2.style.display = "block";
    div3.style.display = "none";
  } else if (i == 2) {
    div1.style.display = "none";
    div2.style.display = "none";
    div3.style.display = "block";
  }  else {
    console.log("you have reached the limit");
  }
});

body {
  display: flex;
  flex-wrap: wrap;
}

.div1,
.div2,
.div3 {
  width: 200px;
  height: 200px;
}

.div1 {
  display: block;
}

.div2,
.div3 {
  display: none;
}

<div class="div1" id="div1" style="background-color: crimson">
</div>

<div class="div2" id="div2" style="background-color: rgb(20, 220, 87)">
</div>

<div class="div3" id="div3" style="background-color: rgb(113, 20, 220)">
</div>

<div class="buttons-controller">
  <button id="previous-btn">previous</button>
  <button id="next-btn">next</button>
  <button id="first-div">1</button>
  <button id="second-div">2</button>
  <button id="third-div">3</button>
</div>

uj5u.com熱心網友回復：

您正在按 id 選擇下一個按鈕，但頁面上有多個下一個按鈕 - 所以只有 div1 中的一個被選中。

檔案中的 ID 是唯一的，您可以在此處閱讀更多相關資訊：https : //developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

使用類似 document.querySelector('.next-button') 的類按類選擇按鈕，您也應該能夠處理點擊div2。

還要確保初始化i為 1，否則需要點擊兩次才能到達div2。

標籤：javascript html css 导航

上一篇：我需要使用css-包含文本div旁邊的流體寬度div來實作此布局

下一篇：在javascript中找不到非異步函式