时间戳

首页 > 解决方案 > innerHTML变化的简单JS prev-next导航

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

问题描述

鉴于这个非常简单的框架，有哪些方法可以用 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>

标签： javascriptnavigationsiblings

解决方案

为按钮添加图像并在它们上放置一个 onclick 事件。调用 prev() 获取上一个文本，调用 next() 获取下一个文本

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];
}

将上面的代码放在脚本标签中，并放置一些控制语句，这样 i 的值将始终保持在给定的范围内

推荐阅读