以下是一个不使用路由的多按钮切换的解决方法的代码示例:
HTML代码:
Page 1
Page 2
CSS代码:
.page {
display: none;
}
.active {
display: block;
}
JavaScript代码:
function changePage(page) {
// 隐藏所有页面
var pages = document.getElementsByClassName('page');
for (var i = 0; i < pages.length; i++) {
pages[i].classList.remove('active');
}
// 显示目标页面
var targetPage = document.getElementById('page' + page);
targetPage.classList.add('active');
}
在上述代码中,我们首先使用HTML创建了两个页面,每个页面都有一个按钮,点击按钮可以切换到另一个页面。每个页面都有一个唯一的ID,用于在JavaScript中进行引用。
然后,我们使用CSS隐藏了所有页面,并为当前活动的页面添加了一个active
类,使其可见。
最后,在JavaScript中,我们定义了一个changePage
函数,它接受一个参数page
,表示要切换到的页面。函数首先隐藏所有页面,然后显示目标页面。
通过在按钮的onclick
事件中调用changePage
函数,并传入目标页面的ID,我们可以实现多按钮切换页面的功能。