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

时间：2019-05-14 00:53:55

标签： javascript html css anchor href

有人可以告诉我为什么我无法点击锚标签吗？

我已将代码附加在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>

可点击的锚标记。

1 个答案:

答案 0 :(得分：2)

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

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

如您所见，<a>标签的开始和结束之间没有任何内容。

最好这样做：

      <li><a href="">About</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Contact</a></li>
相关问题
最新问题