<div class="page" id="page1">页面一</div> <div class="page" id="page2">页面二</div> <div class="page" id="page3">页面三</div> <div class="yema"> <div class="aa"> <button onclick="page_1" class="btnprev" id="prev"> < </button> <ul class="paper"> <li class="number" onclick="page_1" id="page1">1</li> <li class="number" onclick="page_2" id="page2">2</li> <li class="number" onclick="page_3" id="page3">3</li> </ul> <button onclick="page_2" type="button" class="btn-next" id="next"> > </button> </div> </div> 实现页面切换,有上一页,页码和下一页的点击切换
时间: 2023-07-03 12:24:24 浏览: 205
您可以使用JavaScript来实现页面切换,以下是一个简单的示例代码:
HTML代码:
```html
<div class="page" id="page1">页面一</div>
<div class="page" id="page2">页面二</div>
<div class="page" id="page3">页面三</div>
<div class="yema">
<div class="aa">
<button onclick="prevPage()" class="btnprev" id="prev"><</button>
<ul class="paper">
<li class="number" onclick="goToPage(1)" id="page1">1</li>
<li class="number" onclick="goToPage(2)" id="page2">2</li>
<li class="number" onclick="goToPage(3)" id="page3">3</li>
</ul>
<button onclick="nextPage()" type="button" class="btn-next" id="next">></button>
</div>
</div>
```
JavaScript代码:
```javascript
var currentPage = 1; // 当前页码
function prevPage() {
if (currentPage > 1) {
currentPage--;
goToPage(currentPage);
}
}
function nextPage() {
if (currentPage < 3) {
currentPage++;
goToPage(currentPage);
}
}
function goToPage(page) {
currentPage = page;
for (var i = 1; i <= 3; i++) {
var pageDiv = document.getElementById("page" + i);
var pageLi = document.getElementById("page" + i);
if (i == page) {
pageDiv.style.display = "block";
pageLi.classList.add("active");
} else {
pageDiv.style.display = "none";
pageLi.classList.remove("active");
}
}
}
```
CSS代码:
```css
.yema {
text-align: center;
margin-top: 20px;
}
.paper {
display: inline-block;
margin: 0;
padding: 0;
}
.number {
display: inline-block;
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ccc;
cursor: pointer;
}
.number.active {
background-color: #ccc;
}
.btnprev,
.btn-next {
display: inline-block;
margin: 0 10px;
padding: 5px 10px;
border: 1px solid #ccc;
background-color: #f5f5f5;
cursor: pointer;
}
.btnprev:hover,
.btn-next:hover {
background-color: #ccc;
}
```
在这个示例代码中,我们使用了三个 `div` 元素作为页面容器,并给它们设置了不同的 `id` 属性。然后,在页面底部,我们创建了一个 `div` 元素作为页码容器,里面包含了一个“上一页”按钮、一个页码列表和一个“下一页”按钮。在JavaScript代码中,我们使用了三个函数来实现页面切换:`prevPage()`、`nextPage()` 和 `goToPage(page)`。`prevPage()`函数用于切换到上一页,`nextPage()`函数用于切换到下一页,`goToPage(page)`函数用于切换到指定的页码。我们还定义了一个全局变量`currentPage`,用于保存当前页码。在 `goToPage(page)` 函数中,我们使用了一个循环来遍历所有页面容器,并根据当前页码来显示或隐藏页面容器。同时,我们还给当前页码添加了 `.active` 样式,以便高亮显示。
最后,我们还定义了一些CSS样式来美化页面和页码容器。
您可以根据需要进行修改和调整。希望这个示例代码能够帮助到您!
阅读全文