JS로 특정 유체 페이지에서 바닥 글 숨기기

Question

우선 "유체 페이지"는 무엇을 의미합니까? 나는이 ID를 페이지로 표시하는 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)를 클릭하면 꼬리말이 여전히 남아 있습니다. 단, # 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/

Answer 2

변경이

$("#homeContainer").css(display:none); 

사람 :

$("#homeContainer").css("display","none");