javascript - 使用 JS 在特定的流体页面中隐藏页脚

Question

首先，“流动页面”是什么意思？我的意思是一个很长的页面，它被分成 id 部分，这些部分将这些 id 显示为页面。它最基本的结构如下所示:

    <div class="mainnav">
        <ul>
            <li><a href="#page1">PAGE 1</a></li>
            <li><a href="#page2">PAGE 2</a></li>
            <li><a href="#page3">PAGE 3</a></li>
            <li><a href="#page4">PAGE 4</a></li>
            <li><a href="#page5">PAGE 5</a></li>
        </ul>
    </div>
    <div id="page1" class="container-fluid"> Page 1 content </div>
    <div id="page2" class="container-fluid"> Page 2 content </div>
    <div id="page3" class="container-fluid"> Page 3 content </div>
    <div id="page4" class="container-fluid"> Page 4 content </div>
    <div id="page5" class="container-fluid"> Page 5 content </div>

    <!-- sticky footer -->
    <div class="footer"></div>

因此，正如您所看到的，每当您点击该 ID 的菜单项时，内容都会向上滑动，直到到达该 ID，并且它会显示内容，就好像它是不同的页面一样。够简单的!

我的问题是，我将页脚粘住了，这样当您单击下一页 (ID) 时，页脚仍然存在，除了我不希望它在选择 #page1 时显示。

我尝试构建一个小型 JS，但我的 JS 不太好。这是我的尝试

<script type="text/javascript">
    function hideFooter(){
        $("#homeContainer").css(display:none);
    }

         $(document).ready(function() {
             hideFooter();
    });
</script>

显然，不起作用。这是FIDDLE您可以使用。

有什么想法吗!？

Answer 1

您只需在 .mainnav a 标记上添加一个处理程序并根据需要进行切换:

$(document).ready(function() {
    Viewport();
    $(window).bind('resize', Viewport);

    $('.mainnav a').click(function(){
        if (this.href.indexOf('#page1') == -1) {
            $('.footer').show();
        } else {
            $('.footer').hide();
        }
    });
});

http://jsfiddle.net/taHCv/4/