修改页面背景怎么在切换导航的时候保持切换的背景不变
时间: 2023-12-10 20:39:35 浏览: 50
可以使用 JavaScript 来实现在切换导航时保持背景不变的效果。具体做法是在切换导航时,先保存当前页面的背景颜色,然后切换页面时直接将保存的背景色设置为新页面的背景色。
以下是一个简单的示例代码:
HTML:
```html
<nav>
<ul>
<li><a href="#" onclick="changeBackground('red')">红色</a></li>
<li><a href="#" onclick="changeBackground('blue')">蓝色</a></li>
<li><a href="#" onclick="changeBackground('green')">绿色</a></li>
</ul>
</nav>
<main>
<h1>页面标题</h1>
<p>页面内容</p>
</main>
```
JavaScript:
```javascript
var currentBackground = 'white'; // 初始背景色为白色
function changeBackground(color) {
document.body.style.backgroundColor = color; // 设置新的背景色
currentBackground = color; // 保存当前背景色
}
```
在以上代码中,我们定义了一个全局变量 `currentBackground` 来保存当前页面的背景颜色。每当点击导航链接时,都会调用 `changeBackground` 函数来修改页面的背景色,并将当前背景色保存到 `currentBackground` 变量中。
这样,在切换导航时,我们可以通过读取 `currentBackground` 变量来获取当前页面的背景色,并将其设置为新页面的背景色,从而实现保持背景不变的效果。