导航菜单 CSS 未链接

Question

我正在开发具有多个页面的 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>

我正在尝试将导航菜单链接到我网站的不同页面（例如，他们可以转到“联系人”，并查看有关该主题的信息）。 但是，与此代码的链接不起作用。 当我单击不同的选项卡时，它不显示相应的页面。 我该如何解决？

谢谢！

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 未链接

问题描述

1 个解决方案

解决方案1
0 2020-03-16 09:42:09

导航菜单 CSS 未链接

问题描述

1 个解决方案

解决方案1 0 2020-03-16 09:42:09

解决方案1
0 2020-03-16 09:42:09