我正在处理具有多个页面的Web应用程序，并且正在为导航栏设计样式，以使用户可以浏览不同的页面。但是，当我尝试将导航栏链接到页面时，出现了问题。当我预览代码时，单击不同的选项卡不会将我重定向到相应的页面。到目前为止是我的代码。
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
li a:active {
background-color: #51014d;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div id="home">
<h1>Welcome!</h1></div>
<div id="contact" style="visibility: hidden">
<h2>you can reach me
at:</h2></div>
<style>
#home {
background-color: honeydew;
}
</style>
<style>
#contact {
background-color: lightblue;
}
</style>
</body>
</html>
我正在尝试使导航菜单链接到我网站的不同页面（例如，他们可以转到“联系人”，并查看有关该主题的信息）。但是，此代码的链接不起作用。当我单击不同的选项卡时，它不会显示相应的页面。我该如何解决？
谢谢！
尝试下面的代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
li a:active {
background-color: #51014d;
}
#home {
background-color: honeydew;
}
#contact {
background-color: lightblue;
}
#about {
background-color: darkblue;
}
</style>
</head>
<body>
<ul>
<li><a onclick="showDiv('home');" class="active" href="#home">Home</a></li>
<li><a onclick="showDiv('contact');" href="#contact">Contact</a></li>
<li><a onclick="showDiv('about');" href="#about">About</a></li>
</ul>
<div id="home">
<h1>Welcome!</h1>
</div>
<div id="contact">
<h2>you can reach me
at:</h2>
</div>
<div id="about">
<h2>about us
at:</h2>
</div>
<script>
function showDiv(id) {
document.getElementById("home").style.display = "none";
document.getElementById("about").style.display = "none";
document.getElementById("contact").style.display = "none";
document.getElementById(id).style.display = "block";
}
showDiv('home');
</script>
</body>
</html>