如何用html+长沙市实现上面的功能
时间: 2024-03-24 08:36:30 浏览: 14
要实现这个功能,你需要先在HTML中添加导航栏的结构,然后使用CSS样式定义导航栏链接的样式,最后使用JavaScript来实现点击链接时变色的效果。
下面是一个使用长沙市作为示例的代码:
```HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
/* 导航栏链接的样式 */
.nav-link {
color: black; /* 文字颜色 */
background-color: white; /* 背景颜色 */
padding: 10px; /* 链接内边距,让链接更易于点击 */
}
/* 被点击链接的样式 */
.nav-link.active {
color: red; /* 文字颜色变为红色 */
background-color: yellow; /* 背景颜色变为黄色 */
}
</style>
</head>
<body>
<nav>
<a class="nav-link active" href="#">长沙市</a>
<a class="nav-link" href="#">岳麓区</a>
<a class="nav-link" href="#">开福区</a>
<a class="nav-link" href="#">天心区</a>
<a class="nav-link" href="#">雨花区</a>
</nav>
<script>
// 获取所有导航栏链接元素
var links = document.querySelectorAll(".nav-link");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function() {
// 首先移除所有链接的 "active" 类名
for (var j = 0; j < links.length; j++) {
links[j].classList.remove("active");
}
// 给当前点击的链接添加 "active" 类名
this.classList.add("active");
});
}
</script>
</body>
</html>
```
在这个示例中,我们使用了 `<nav>` 元素来包含导航栏链接。我们给第一个链接添加了 "active" 类名,表示默认情况下该链接为当前选中状态。在JavaScript中,我们使用 `querySelectorAll` 方法获取所有导航栏链接元素,并使用 `addEventListener` 方法为每个链接添加了一个 "click" 事件监听器。当用户点击一个链接时,我们首先移除所有链接的 "active" 类名,然后给当前点击的链接添加 "active" 类名,这样就可以实现点击链接时变色的效果了。