编写一段代码使html导航栏实现点击跳转页面,选中的标签改变底色
时间: 2023-06-11 20:05:44 浏览: 196
好的,以下是一个简单的实现点击导航栏跳转页面、选中标签改变底色的代码示例:
HTML代码:
```
<nav>
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</nav>
```
CSS代码:
```
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
overflow: hidden;
}
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav li a:hover:not(.active) {
background-color: #111;
}
nav li a.active {
background-color: #4CAF50;
}
```
JavaScript代码:
```
let navItems = document.querySelectorAll('nav li a');
for (let i = 0; i < navItems.length; i++) {
navItems[i].addEventListener('click', function() {
let current = document.getElementsByClassName('active');
current[0].className = current[0].className.replace('active', '');
this.className += 'active';
});
}
```
解释:在HTML代码中定义了一个导航栏,包含三个链接,分别指向三个页面。在CSS代码中对导航栏的样式进行了定义,当鼠标悬停在导航栏上时会有背景色变化,当选中某个标签时背景色也会变化。在JavaScript代码中对每个导航链接进行了监听,当某个链接被点击时先将当前active状态的链接去掉active样式,再将当前点击的链接添加上active样式,实现了选中标签改变底色的功能。
阅读全文