生成一个基于HTML+CSS+JavaScript技术的手机网站要求八个不同的子页面的代码
时间: 2024-10-19 14:08:27 浏览: 6
创建一个基于HTML、CSS和JavaScript的手机网站需要分别考虑每个子页面的设计和交互。这里是一个简化的示例,展示了如何创建一个基本的单页应用结构,你可以根据需求添加更多的子页面:
首先,我们需要设置一个基本的HTML结构,这将作为所有子页面的框架:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的手机网站</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入样式文件 -->
</head>
<body>
<nav id="navbar">
<!-- 子页面链接将会放在这里 -->
</nav>
<main id="content">
<!-- 这里显示当前选中的子页面内容 -->
</main>
<script src="scripts.js"></script> <!-- 引入主JS文件 -->
</body>
</html>
```
接下来,我们创建几个子页面,并为导航栏添加链接:
```html
<!-- sub-page1.html -->
<div class="subpage active">子页面1的内容</div>
<!-- ... -->
<!-- sub-page8.html -->
<div class="subpage">子页面8的内容</div>
```
在`styles.css`中,我们可以编写基础样式和切换子页面的样式:
```css
/* styles.css */
.subpage {
display: none;
}
.subpage.active {
display: block;
}
```
最后,在`scripts.js`中,添加一些简单的JavaScript用于切换子页面:
```javascript
// scripts.js
function setActivePage(pageNumber) {
const pages = document.querySelectorAll('.subpage');
pages.forEach((page, index) => {
if (index === pageNumber - 1) {
page.classList.add('active');
pages[index + 1].classList.remove('active');
} else {
page.classList.remove('active');
}
});
}
// 在导航栏点击事件中调用这个函数,比如:
const navbarItems = document.querySelectorAll('#navbar a');
navbarItems.forEach(item => item.addEventListener('click', function(e) {
e.preventDefault();
setActivePage(1); // 更改这里的数字对应子页面索引,从1开始
}));
```
记得为每个子页面创建单独的HTML文件,并替换`<div>`中的内容。
阅读全文