我想在按下按钮后进行切换。这就是代码。这不会是为了这么简单的事情，但我甚至无法让它发挥作用。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Test</title>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-section page-1 active"><h1>I'm page 1</h1></div>
<div class="page-section page-2"><h1>I'm page 2</h1></div>
<button class="link link-1">Page 1 link</button>
<button class="link link-2">Page 2 link</button>
</body>
</html>
CSS
.page-section {
width: 200px;
height: 200px;
display: none;
}
.page-1 {
background-color: blue;
}
.page-2 {
background-color: red;
}
.page-section.active {
display: block;
}
JS-
function pageActivator(page) {
$('.page-section').removeClass('active');
page.addClass('active');
}
$('.link').click(function() {
var pageNum = parseInt($(this).attr('class').match(/d+/g)[0]);
pageActivator($('.page-' + pageNum));
});
这是代码笔，在网站上它是有效的，而在当地它不是，我不知道为什么。我真的不明白，因为代码笔中的代码是一样的，也许我在HTML文件中遗漏了什么？即使.js文件连接正确，我也已经验证过了。还有CSS文件。
您使用了JQuery代码，但没有调用JQuery库。执行以下操作：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Test</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>