Question

我创建了一个简单的菜单设置，其中所有信息都在同一页面上 - 只有大多数信息被隐藏，直到选中该选项卡。我使用的过滤器JS非常适用于此但由于某种原因（仅限CHROME），当单击菜单项（例如，位置，帮助）时，屏幕会拍摄几百个像素（显示所选信息就好了）虽然）。奇怪的是，只有在页面刷新并且第一次单击该项时才会发生这种情况。在那之后，一切都很棒！

以下是相关代码，但要查看其实际效果，请参阅test site

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

Answer 1

它是锚标记中的href="#"，它们指向页面顶部。您可能希望向点击处理程序添加preventDefault()。阅读所有相关内容here。

JS Filter链接正在移动页面 - 不知道为什么

1 个答案: