如何使用Div Array进行下一个和后按钮？

Question

var divs = ["Page1", "Page2", "Page3"];
var visibleDivId = null;
var i, divID, div;

function divVisibility(divID) {
  if (visibleDivId == divID) {
    visibleDivId = null;
  } else {
    visibleDivId = divID;
  }
  hideNonVisibleDivId();
}

function hideNonVisibleDivId() {
  for (i = 0; i < divs.length; i++) {
    divID = divs[i];
    div = document.getElementById(divID);
    if (visibleDivId === divID) {
      div.style.display = "block";
    } else {
      div.style.display = "none";
    }
  }
}

}

<HTML>

<Head>

</Head>

<Body>
  <Center>

    <table style="border-radius:15px 15px 15px 15px;">

      <tr>
        <td>
          <center>
            <div style="width:850px; border:3px black solid; margin-top:30px; margin-bottom:-10px; border-radius:8px 8px 8px 8px; background-image: url('https://basilthesheep.neocities.org/SiteImages/color2.png')">

              <!-- toolbar -->
              <table style="border-top: none; height:0px;">

                <tr>
                  <td>
                    <center>
                      <div class="toolbar" style="border-radius:15px 15px 15px 15px;">

                        <font size="3"><b>~&nbsp;&nbsp;/ 
<a href="#" onClick="divVisibility('Page1')">&nbsp;&nbsp;&nbsp;First&nbsp;&nbsp;&nbsp;</a> /
<a href="#" onClick="backward(?????);">&nbsp;&nbsp;&nbsp;Back&nbsp;&nbsp;&nbsp;</a> /
<a href="#" onClick="forward(??????);">&nbsp;&nbsp;&nbsp;Next&nbsp;&nbsp;&nbsp;</a> /
<a href="#" onClick="divVisibility('Page3');">&nbsp;&nbsp;&nbsp;Latest&nbsp;&nbsp;&nbsp;</a> / &nbsp;&nbsp;~</b></font>

                      </div>
                    </center>
                  </td>
                </tr>

              </table>
              <!-- diary -->

              <table style="border-radius:15px 15px 15px 15px;">

                <tr>
                  <td>
                    <center>
                      <div id="diary">

                        <div id="Page1">

                          egg

                        </div>

                        <div id="Page2" style="display: none;">

                          egg bacon

                        </div>

                        <div id="Page3" style="display: none;">

                          egg bacon cheese

                        </div>

                      </div>
                    </center>
                  </td>
                </tr>
              </table>
            </div>
          </center>
        </td>
      </tr>
    </table>
  </center>
</body>

</html>

我试图这样做：
首先总是转到第一个Div（page1）
接下来将转到第2页3 4等。
返回将返回第3 2 1页。
最新将转到最后一个Div（当前第3页）

仅第一和最新才能起作用

看它可以多么简单：

Answer 1

* { font-family: sans-serif; } body > section { display: none; } body > section:first-of-type { display: block; } button { font-size: 160%; }

<!DOCTYPE html>
<html>
    <body>
        <head><button>⇦</button><button>⇨</button></head>
        <section>Page 1</section>
        <section>Page 2</section>
        <section>Page 3</section>
        <section>Page 4</section>
    </body>
</html>

关注这些时刻：

不要重复

document.getElementById

，最好对所有元素做一次，但是...

使用

document.querySelectorAll

以避免使用
```
id
```
属性并立即采取整个元素。 - 请注意，您将一组页面作为数组。这样，您就不需要第一个和最后一个索引，从数组中知道。
const
```
和
```
let
```
。几乎一切都是
```
const

您不需要任何循环。

属性

.disabled

按钮上的属性使您免于多余的支票。

如何使用Div Array进行下一个和后按钮？

问题描述投票：0回答：1

1个回答

最新问题

如何使用Div Array进行下一个和后按钮？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1