Меню навигации CSS не связывает - PullRequest
0 голосов
/ 16 марта 2020

Я работаю над веб-приложением с несколькими страницами и работаю над стилизацией панели навигации для моих пользователей для go на разных страницах. Однако, когда я пытаюсь связать панель навигации со страницами, что-то идет не так. При предварительном просмотре кода нажатие на разные вкладки не перенаправляет меня на соответствующие страницы. Пока мой код прилагается.

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

Я пытаюсь сделать ссылку в меню навигации на разные страницы моего сайта (например, они могут go "связаться" и просмотреть информацию, касающуюся этого. топи c). Однако ссылки с этим кодом не работают. Когда я нажимаю на разные вкладки, он не показывает соответствующую страницу. Как мне это исправить?

Спасибо!

1 Ответ

0 голосов
/ 16 марта 2020

попробуйте ниже код:

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...