0

我创建了一个简单的菜单设置，其中所有信息都在同一页面上 - 在选择该选项卡之前，大部分信息都是隐藏的。我正在使用的过滤器 JS 对此非常有效，但由于某种原因（仅在 CHROME 中），当单击菜单项（例如，位置、帮助）时，屏幕会弹出几百像素（显示选定的信息就好了尽管）。奇怪的是，这只发生在页面被刷新并且第一次被点击的时候。在那之后，一切都很好！

以下是相关代码，但要查看它的实际效果，请参阅测试站点

我用于过滤器的 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>
4

1 回答 1

0

它href="#"在您的锚标记中，它们指向页面顶部。您可能希望将 a 添加preventDefault()到您的点击处理程序中。在这里阅读所有相关信息。

于 2012-09-26T20:04:52.967 回答