一个使用五个导航栏切换本页内容的html程序
时间: 2023-08-07 07:03:14 浏览: 49
好的,下面是一个使用五个导航栏切换本页内容的HTML程序:
```
<!DOCTYPE html>
<html>
<head>
<title>导航栏切换页面内容</title>
<style type="text/css">
.navbar {
overflow: hidden;
background-color: #333;
margin-bottom: 10px;
}
.navbar a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<div class="navbar">
<a class="active" href="#">首页</a>
<a href="#">新闻</a>
<a href="#">产品</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</div>
<div id="content">
<h3>欢迎访问我们的网站!</h3>
<p>这是首页的内容。</p>
</div>
<script type="text/javascript">
var navLinks = document.getElementsByClassName("navbar")[0].getElementsByTagName("a");
var content = document.getElementById("content");
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
var page = this.innerHTML;
content.innerHTML = "<h3>" + page + "</h3><p>这是" + page + "的内容。</p>";
});
}
</script>
</body>
</html>
```
这个程序包括一个具有五个链接的导航栏,当用户单击链接时,它将激活相应的链接并显示链接指向的内容。使用JavaScript实现该功能。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)