js解决弹窗问题实现班级跳转DIV示例

下面是一个简单的JavaScript示例，展示了如何使用弹窗（alert）来提示用户，并根据用户的确认实现页面内班级跳转（即显示或跳转到指定的DIV）。这里假设我们有两个班级的DIV，分别用`class1`和`class2`标识。

首先，是HTML部分，定义了两个班级的DIV和一些控制按钮：


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>班级跳转示例</title>
<style>
    .class-container {
        display: none; /* 默认隐藏 */
        padding: 20px;
        border: 1px solid #ccc;
        margin-top: 10px;
    }
</style>
</head>
<body>

<button onclick="goToClass('1')">跳转到班级1</button>
<button onclick="goToClass('2')">跳转到班级2</button>

<div id="class1" class="class-container">
    这是班级1的内容。
</div>

<div id="class2" class="class-container">
    这是班级2的内容。
</div>

<script src="script.js"></script>
</body>
</html>

接下来是JavaScript部分（放在`script.js`文件中）：


function goToClass(classId) {
    // 弹出确认框
    if (confirm('确定要跳转到班级' + classId + '吗？')) {
        // 隐藏所有班级DIV
        document.querySelectorAll('.class-container').forEach(function(div) {
            div.style.display = 'none';
        });
        
        // 显示指定的班级DIV
        document.getElementById('class' + classId).style.display = 'block';
    }
}

在这个示例中，`goToClass`函数接收一个参数`classId`，表示要跳转到的班级编号（在这个例子中是字符串`'1'`或`'2'`）。函数首先使用`confirm`方法弹出一个确认框，询问用户是否确定要跳转。如果用户点击“确定”，则函数会先隐藏所有班级DIV（使用`querySelectorAll`和`forEach`遍历并设置`display`属性为`'none'`），然后显示指定编号的班级DIV（通过拼接ID并使用`getElementById`获取元素，然后设置`display`属性为`'block'`）。

这样，当用户点击按钮时，就会先看到一个弹窗询问是否确认跳转，然后根据用户的选择显示相应的班级内容。