展示大屏 页面切换按钮
时间: 2023-06-26 22:04:10 浏览: 109
好的,以下是一个简单的展示大屏页面切换按钮的示例代码:
HTML代码:
```html
<div class="page-buttons">
<button class="active" onclick="switchPage(1)">页面1</button>
<button onclick="switchPage(2)">页面2</button>
<button onclick="switchPage(3)">页面3</button>
<button onclick="switchPage(4)">页面4</button>
</div>
<div class="page" id="page1">
<!-- 页面1的内容 -->
</div>
<div class="page" id="page2">
<!-- 页面2的内容 -->
</div>
<div class="page" id="page3">
<!-- 页面3的内容 -->
</div>
<div class="page" id="page4">
<!-- 页面4的内容 -->
</div>
```
CSS代码:
```css
.page-buttons {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.page-buttons button {
font-size: 18px;
padding: 10px 20px;
margin-right: 10px;
border: none;
background-color: #f5f5f5;
color: #333;
cursor: pointer;
}
.page-buttons button.active {
background-color: #333;
color: #fff;
}
.page {
display: none;
}
.page.active {
display: block;
}
```
JavaScript代码:
```javascript
function switchPage(pageNum) {
// 隐藏所有页面
var pages = document.getElementsByClassName("page");
for (var i = 0; i < pages.length; i++) {
pages[i].classList.remove("active");
}
// 显示选中的页面
var pageToShow = document.getElementById("page" + pageNum);
pageToShow.classList.add("active");
// 切换选中状态的按钮
var buttons = document.getElementsByClassName("page-buttons")[0].getElementsByTagName("button");
for (var j = 0; j < buttons.length; j++) {
buttons[j].classList.remove("active");
}
buttons[pageNum-1].classList.add("active");
}
```
在这个示例中,页面切换按钮被包含在一个 `div` 元素中,并且每个按钮都有一个 `onclick` 属性,指定了点击按钮时应该调用的 `switchPage` 函数,并传入当前按钮对应的页面号码。每个页面都被包含在一个 `div` 元素中,并且都有一个 `id` 属性,用于唯一标识该页面。CSS样式规则定义了按钮和页面的外观和动画效果。在 `switchPage` 函数中,首先隐藏所有页面,然后显示选中的页面,并切换选中状态的按钮。