如果你想在JavaScript中实现一个简单的上下切换效果，可以使用以下步骤：
假设你有一组元素，例如一组图片或内容块，你想要在点击按钮时在它们之间进行上下切换。
首先，在HTML中创建相关的结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上下切换</title>
<style>
.content {
display: none; /* 初始状态下隐藏所有内容 */
}
.active {
display: block; /* 显示当前活动内容 */
}
</style>
</head>
<body>
<div class="content active" id="content1">
<!-- 内容1 -->
<p>内容1</p>
</div>
<div class="content" id="content2">
<!-- 内容2 -->
<p>内容2</p>
</div>
<button onclick="switchContent('up')">上一项</button>
<button onclick="switchContent('down')">下一项</button>
<script>
let currentIndex = 0; // 记录当前显示内容的索引
function switchContent(direction) {
const contents = document.querySelectorAll('.content');
contents[currentIndex].classList.remove('active'); // 隐藏当前内容
if (direction === 'up') {
currentIndex = (currentIndex - 1 + contents.length) % contents.length; // 上一项
} else {
currentIndex = (currentIndex + 1) % contents.length; // 下一项
}
contents[currentIndex].classList.add('active'); // 显示新内容
}
</script>
</body>
</html>
上述代码演示了一个简单的上下切换效果。在这个例子中，有两个内容块，初始时只显示第一个。通过点击按钮，可以切换到上一个或下一个内容块。在switchContent函数中，根据传入的方向参数，更新currentIndex来选择要显示的内容。
本站资源均来源于互联网，仅限于学习研究，严禁从事商业或者非法活动！丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：js 切换上下的原理
