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开头没有宽度，所以Javascript没有divs滚动到。我给了他们一个宽度，似乎工作正常....

给出宽度的示例：

#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

导航栏链接无法在网站上点击

1 个答案: