Javascript JS过滤器链接正在移动页面-不确定原因

我创建了一个简单的菜单设置，其中所有信息都在同一页上，只是大部分信息在选中该选项卡之前是隐藏的。我使用的过滤器JS在这方面效果很好，但出于某种原因（仅在CHROME中），当单击菜单项（例如，Location，Help）时，屏幕会弹出几百个像素（尽管显示选定的信息很好）。奇怪的是，只有在刷新页面并第一次单击项目时才会发生这种情况。在那之后，一切都很好

下面是相关代码，但要查看其实际操作，请参阅

我用于过滤器的JS是：

    $(document).ready(function() {
    $('#nav a').click(function() {
        $('#nav a.current').removeClass('current');
        $(this).addClass('current');

        var filterVal = $(this).text().toLowerCase().replace(' ','');

        $('#content div').each(function() {
            if(!$(this).hasClass(filterVal)) {
                    $(this).hide().addClass('hidden');
            } else {
                $(this).show().removeClass('hidden');
            }
        });
    return false;
    });
});

将HTML菜单和信息设置为：

<ul id=nav>
<a href="#" class="current"><li>Mission</li></a>
<a href="#"><li>Location</li></a>
<a href="#"><li>Help</li></a>
<a href="#"><li>Vendors</li></a>        
</ul>


        <div id=content>
        <div class=mission>
            <img src="./images/roosters.jpg">
            <h2>The Mission</h2>
            <p>...</p>
        </div>

        <div class=location>
            <img src="./images/old_market.jpg">
            <h2>Our Location</h2>
            <p>...</p>
        </div>

        <div class=help>
            <img src="./images/helpers.jpg">
            <h2>Get Involved</h2>
            <p>...</p>
        </div>

        <div class=vendors>
            <img src="./images/artisans.jpg">
            <h2>Our Vendors</h2>
            <p>...</p>
        </div>          

    </div>

使命

我们的位置

介入

我们的供应商

是锚定标记中指向页面顶部的

href=“#”

。您可能希望向单击处理程序添加一个

preventDefault（）

。阅读所有内容。

您的html标记无效。只有

元素被允许作为

或

的直接子元素，我应该把它们放在哪里？我在“return false”下面加了它，但它什么也没做。另外，当点击时，它不会一直到页面的顶部，只是其中的一部分在那里，问题的根源似乎在其他地方，现在就摆好小提琴来处理它。谢谢！我已将href=“#”替换为“javascript:”、“javascript:void（0）”等，并且没有任何更改。您的

#content

div之后是否有任何内容？我认为发生的事情是，当那些内部div被设置为隐藏时，页面本身并没有向上移动，内容只是向下移动。我设置了一个提琴，如果我添加了一个

div

，内容跟在你的后面，问题就消失了。我没有，只是用“推”div来填充粘性页脚，然后是页脚。我会很快尝试你的建议。。。