innerHTML 变化的简单 JS prev-next 导航

Question

鉴于这个非常简单的框架，有哪些方法可以用 prev/next 按钮替换 innerHTML 内容的单词列表导航？我已经尝试实施 nextElementSibling - 如果这是最好的解决方案 - 但它超出了我的头脑。

如果有所不同，我确实希望最终用格式相当复杂的 html 块替换 innerHTML 内容，但我想了解一个简单的解决方案，它可以在任何情况下容纳像这样非常简单的内容案件。非常感谢您的帮助。

function first() {
  document.getElementById("content").innerHTML = "dog";
}

function second() {
  document.getElementById("content").innerHTML = "cat";
}

function third() {
  document.getElementById("content").innerHTML = "fish";
}

body {
  font-size: 30px;
  padding: 30px;
  line-height: 2em;
}

<div id="content"></div>
<span onclick="first()">first</span>
<span onclick="second()">second</span>
<span onclick="third()">third</span>

Answer 1

为按钮添加图像并在 them.Call 上一个文本的 prev() 和下一个文本的 next() 上放置一个 onclick 事件

var i=0;
var text=["dog","cat","fish"];
document.getElementById("content").innerHTML=text[0];


function prev(){
i-=1; 
document.getElementById("content").innerHTML=text[i];
}


function next(){
i+=1; 
document.getElementById("content").innerHTML=text[i];
}

把上面的代码放在script标签里，加上几条控制语句，让i的值一直保持在给定的范围内

innerHTML 变化的简单 JS prev-next 导航

Simple JS prev-next navigation of innerHTML changes

javascript

navigation

siblings