为什么我不能单击导航栏的锚标记？

Question

谁能告诉我为什么我不能点击我的锚标签？

我已将我的代码附在 jsfiddle 上。只需在输出框中向下滚动。它没有显示在那里，因为图像丢失了。 https://jsfiddle.net/ydntL72f/1/

我弄乱了 z-index css 属性但看不到让它与它一起工作。

@font-face {
    font-family: 'Gotham';
    src: url("Control Panel/Appearance and Personalization/Fonts/Gotham XLight");
}

@font-face {
    font-family: 'Prime';
    src: url(../fonts/Prime-Regular.ttf);
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Gotham';
}

/* Count Down Timer */
.bgimg {
    background: url(../img/background-image.jpg);
    height: 100%;
    background-position: center;
    background-size: cover;
    position: relative;
    color: #000;
    font-family: 'Prime';
}

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 20px 100px;
}

#logo {
    width: 100px;
}

h1 {
    font-size: 40px;
    letter-spacing: 30px;
    font-weight: 100;
    text-shadow: 5px white;
}

#demo {
    font-weight: lighter;
    word-spacing: 20px;
}

hr {
    margin: auto;
    width: 80%;
    border: 1.5px solid #000;
}

/* Nav Bar */
header {
    width: 100%;
    height: 100vh;
    background: url(../img/background-image.jpg) no-repeat 50% 50%;
    background-size: cover;
}

.content {
    width: 90%;
    margin: 4em auto;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
}

.logo {
    position: fixed;
    float: left;
    margin: 16px 36px;
    color: #fff;
    font-weight: bold;;
    font-size: 24px;
}

nav {
    position: fixed;
    width: 100%;
}

nav ul {
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: center;
    margin: 0;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 20px;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    z-index: 1;
}

.menu-icon {
    width: 100%;
    background: #000;
    text-align: right;
    box-sizing: border-box;
    padding: 15px 24px;
    cursor: pointer;
    color: #fff;
    display: none;
}

@media(max-width: 760px) {

    /* Nav Bar */
    .logo {
        position: fixed;
        top: 0;
        margin-top: 16px;
    }

    nav ul {
        max-height: 0px;
        background: #000;
    }

    nav.black ul {
        background: #000;
    }

    .showing {
        max-height: 20em;
    }

    nav ul li {
        box-sizing: border-box;
        width: 100%;
        padding: 24px 0;
        text-align: center;
    }

    .menu-icon {
        display: block;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Home | Tyler Kautz</title>
    <link rel="stylesheet" href="css/stylesheet.css">
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
</head>
<body>
    
    <div class="wrapper">
        <header>
            <nav>
                <div class="menu-icon">
                    <i class="fa fa-bars fa-2x"></i>
                </div>
                <div class="logo">
                    LOGO
                </div>
                <div class="menu">
                    <ul>
                        <li><a href="index-new.html"></a>Home</li>
                        <li><a href="index-new.html"></a>About</li>
                        <li><a href="index-new.html"></a>Blog</li>
                        <li><a href="index-new.html"></a>Contact</li>
                    </ul>
                </div>
            </nav>
        </header>

        <div class="content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eros sapien, lacinia et nibh at, blandit lacinia ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec malesuada leo libero. Aliquam ut tincidunt quam, ac congue lectus. Quisque vulputate ut urna vitae dapibus. Donec vel tempor nibh, eu ornare sem. Duis rhoncus pulvinar tortor blandit aliquet.
                Vestibulum non nulla facilisis, dapibus velit ut, fringilla urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et dignissim augue. Mauris neque ante, egestas vel eros ut, sagittis varius justo. Curabitur ut lacus quis turpis vulputate efficitur. Morbi sed porta felis. Donec faucibus pretium eros sed porttitor. Cras finibus vel diam quis euismod. Morbi id velit sit amet ante tempor ultricies. Duis egestas, est a vulputate convallis, nisi urna interdum dolor, volutpat volutpat lorem mi et sem.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eros sapien, lacinia et nibh at, blandit lacinia ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec malesuada leo libero. Aliquam ut tincidunt quam, ac congue lectus. Quisque vulputate ut urna vitae dapibus. Donec vel tempor nibh, eu ornare sem. Duis rhoncus pulvinar tortor blandit aliquet.
                Vestibulum non nulla facilisis, dapibus velit ut, fringilla urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et dignissim augue. Mauris neque ante, egestas vel eros ut, sagittis varius justo. Curabitur ut lacus quis turpis vulputate efficitur. Morbi sed porta felis. Donec faucibus pretium eros sed porttitor. Cras finibus vel diam quis euismod. Morbi id velit sit amet ante tempor ultricies. Duis egestas, est a vulputate convallis, nisi urna interdum dolor, volutpat volutpat lorem mi et sem.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eros sapien, lacinia et nibh at, blandit lacinia ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec malesuada leo libero. Aliquam ut tincidunt quam, ac congue lectus. Quisque vulputate ut urna vitae dapibus. Donec vel tempor nibh, eu ornare sem. Duis rhoncus pulvinar tortor blandit aliquet.
                Vestibulum non nulla facilisis, dapibus velit ut, fringilla urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque et dignissim augue. Mauris neque ante, egestas vel eros ut, sagittis varius justo. Curabitur ut lacus quis turpis vulputate efficitur. Morbi sed porta felis. Donec faucibus pretium eros sed porttitor. Cras finibus vel diam quis euismod. Morbi id velit sit amet ante tempor ultricies. Duis egestas, est a vulputate convallis, nisi urna interdum dolor, volutpat volutpat lorem mi et sem.
            </p>
        </div>
    </div>

    <script type="text/javascript">
    
        // Menu Toggle-Button
        $(document).ready(function() {
            $(".menu-icon").on("click", function() {
                $("nav ul").toggleClass("showing");
            });
        });

        // Scrolling Effect
        $(window).on("scroll", function() {
            if($(window).scrollTop()) {
                $('nav').addClass('black');
            }
            else {
                $('nav').removeClass('black');
            }
        });

    </script>

</body>
</html>

可点击的锚标签。

Answer 1

您的链接不包含任何可点击的内容 - 它只是空的。

      <li><a href=""></a>About</li>
      <li><a href=""></a>Blog</li>
      <li><a href=""></a>Contact</li>

如您所见，没有任何 in-between 开始和结束 <a> 标签。

最好这样做:

      <li><a href="">About</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Contact</a></li>

为什么我不能单击导航栏的锚标记？

Why can't I click my anchor tags for my nav bar?

html

javascript

css

anchor

href