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 个答案: