html - 导航栏链接在网站上不可点击

Question

我网站上的链接不可点击。我今年早些时候建立了另一个网站并让它按我想要的方式运行，所以我只是复制了该代码。

<div id="links">
      <div class="wrap">
            <ul id="navigation">
                <li><a href="#atlanta1"; class="down link" id="space">HOME</a></li>
                <li><a href="#atlanta2"; class="down link" id="space">FRESHMAN</a></li>
                <li><a href="#atlanta3"; class="down link" id="space">SOPHOMORE</a></li>
                <li><a href="#atlanta4"; class="down link" id="space">JUNIOR</a></li>
                <li><a href="#stoneMountain"; class="down link">SENIOR</a></li>
            </ul>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
        // Document ready shorthand statement
            $(function() {
                $('.link').click(function() {
                    var id = $(this).attr('href');
                    $('html,body').animate({ scrollTop: $(id).offset().top }, 'slow');
            // Prevent default behavior of link
                    return false;
                    });
                });
        </script>
    </div>
    <div id="atlanta1">
    </div>
    <div id="atlanta2">
    </div>
    <div id="atlanta3">
    </div>
    <div id="atlanta4">
    </div>
    <div id="stoneMountain">
    </div>

我有空白的 div 只是因为它们位于特定的高度，因此链接会将我带到页面上的不同高度。这就是我为链接和 div 设置样式的方式

<style>

        #links {background-color: black;
             background-color: rgba(0, 0, 0, 0.9);
            color: white;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            padding: 0;
            margin: 0;
        z-index:0}
        #navigation {list-style: none; padding: 1; margin: 18px 0px ; color: white; text-align: center;}
        #navigation li {display: inline;}
        #navigation li #space {margin-right:150px;}
        #navigation a {color: inherit; text-decoration: inherit;}

        #header, #footer {width:100%; float:left;}

        #navigation li + li {
            background:url('seperator.gif') no-repeat top left;
            padding-left: 10px
        }
        .wrap {position:relative; margin:0 auto; width:100%;}

        #atlanta1 {
            position:absolute;
            top:0px;
            height: 1000px;
            z-index: -0
        }
        #atlanta2 {
            position:absolute;
            top:1000px;
            height: 1000px;
            z-index: -0
        }
        #atlanta3 {
            position:absolute;
            top:2000px;
            height: 1000px;
            z-index: -0
        }
        #atlanta4 {
            position:absolute;
            top:3000px;
            height: 1000px;
            z-index: -0
        }
        #stoneMountain {
            position:absolute;
            top:4000px;
            height: 1000px;
            z-index: -0
        }
    </style>

我已经被困在这里一段时间了，并没有真正看出哪里出了问题，但是链接不可点击。

Answer 1

我不确定您所说的链接不可点击是什么意思。

我的意思是你的 divs 没有开始的宽度，所以它没有 divs 供 Javascript 滚动到。我给了他们一个宽度，似乎工作正常....

给出宽度的例子:

#atlanta1 {
    position:absolute;
    top:0px;
    height: 1000px;
    width: 100px; // Width!
    z-index: -0;
}

Working Example Here

如您所见，这些链接是可点击的并且有效。

注意:我只给了几个宽度。

---

我想我现在知道你在说什么了，我想这是因为你正在使用 z-index。一些 div 位于标题上方。您可以尝试类似的方法。

z-index:9999;

将它放在标题中，或者如您所称的 #links。

DEMO HERE

---

完整版:

DEMO HERE

---

另一个更新:

正因为如此:

ul li {
    list-style:none;
    overflow:hidden;
    height:1000px;
    position: relative;
    z-index:-2;
}

查看您如何将列表推到标题后面。将它设置为 9 或其他值，它会回到前面。您可能想查看 z-index 的作用。

ul li {
    list-style:none;
    overflow:hidden;
    height:1000px;
    position: relative;
    z-index:9;
}

Working Demo