Navigation Menu CSS not linking

Question

I am working on a web application with multiple pages, and am working on styling a navigation bar for my users to go through the different pages. However, when I try to link the navigation bar to the pages, something is going wrong. When I preview the code, clicking on the different tabs doesn't redirect me to the corresponding pages. Attached is my code so far.

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

I am trying to make the navigation menu link to different pages of my website (for example, they can go to "contact", and view information regarding that topic). However, the links with this code aren't working. When I click on the different tabs, it does not show the corresponding page. How do I fix this?

Thank you!

Answer 1

try below code:

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

Navigation Menu CSS not linking

Question

1 answers

solution1
0 2020-03-16 09:42:09

Navigation Menu CSS not linking

Question

1 answers

solution1 0 2020-03-16 09:42:09

solution1
0 2020-03-16 09:42:09