导航菜单 CSS 未链接

Question

我正在开发一个包含多个页面的 Web 应用程序，并且正在设计一个导航栏的样式，供我的用户浏览不同的页面。但是，当我尝试 link 导航栏到页面时，出现了问题。当我预览代码时，单击不同的选项卡不会将我重定向到相应的页面。附件是我到目前为止的代码。

<!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>

我正在尝试将导航菜单 link 设置到我网站的不同页面（例如，他们可以转到 "contact"，并查看有关该主题的信息）。但是，带有此代码的 links 不起作用。当我点击不同的选项卡时，它没有显示相应的页面。我该如何解决这个问题？

谢谢！

Answer 1

试试下面的代码：

<!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>

导航菜单 CSS 未链接

Navigation Menu CSS not linking

html

javascript

css

navigationbar

responsive-design