杰理-AC695-页面之间跳转、页面内布局切换
发布人：shili8
发布时间：2024-12-27 09:37
阅读次数：0
**杰理-AC695: 页面之间跳转和页面内布局切换**
在前端开发中，页面之间的跳转和页面内的布局切换是非常常见的需求。今天，我们将使用杰理-AC695来实现这些功能。
### 一、页面之间的跳转首先，让我们创建一个简单的页面跳转示例。我们有两个页面：`index.html` 和 `about.html`。
**index.html**
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Index Page</title> </head> <body> <h1>Welcome to Index Page!</h1> <button id="goto-about">Go to About Page</button> <script src="script.js"></script> </body> </html>
**about.html**
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>About Page</title> </head> <body> <h1>Welcome to About Page!</h1> <script src="script.js"></script> </body> </html>
**script.js**
javascript// 获取页面跳转按钮const gotoAboutButton = document.getElementById('goto-about');
// 给按钮添加点击事件监听器gotoAboutButton.addEventListener('click', () => {
// 跳转到 about.html 页面 window.location.href = 'about.html';
});
在上面的示例中，我们使用 `window.location.href` 属性来跳转到指定的页面。这个属性会重新加载当前页面，并将 URL 地址设置为指定的值。
### 二、页面内布局切换接下来，让我们实现一个简单的页面内布局切换功能。我们有两个按钮：`show-list` 和 `show-grid`。
**index.html**
html<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Index Page</title> </head> <body> <h1>Welcome to Index Page!</h1> <button id="show-list">Show List Layout</button> <button id="show-grid">Show Grid Layout</button> <div class="list-layout" style="display: none;"> <!-- 列表布局内容 --> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> </ul> </div> <div class="grid-layout" style="display: none;"> <!-- 网格布局内容 --> <div class="grid-item">Grid Item1</div> <div class="grid-item">Grid Item2</div> <div class="grid-item">Grid Item3</div> </div> <script src="script.js"></script> </body> </html>
**script.js**
javascript// 获取布局切换按钮const showListButton = document.getElementById('show-list');
const showGridButton = document.getElementById('show-grid');
// 给列表布局切换按钮添加点击事件监听器showListButton.addEventListener('click', () => {
// 显示列表布局 const listLayout = document.querySelector('.list-layout');
listLayout.style.display = 'block';
// 隐藏网格布局 const gridLayout = document.querySelector('.grid-layout');
gridLayout.style.display = 'none';
});
// 给网格布局切换按钮添加点击事件监听器showGridButton.addEventListener('click', () => {
// 显示网格布局 const gridLayout = document.querySelector('.grid-layout');
gridLayout.style.display = 'block';
// 隐藏列表布局 const listLayout = document.querySelector('.list-layout');
listLayout.style.display = 'none';
});
在上面的示例中，我们使用 `style.display` 属性来切换页面内的布局。这个属性会将指定的元素显示或隐藏。
以上就是杰理-AC695实现页面之间跳转和页面内布局切换的示例代码。
粤公网安备 44011102002787号