隱藏頁腳與JS的特定流體頁面

首先，「流體頁面」的含義是什麼？我的意思是一個長頁面被分成ID部分，這些部分將這些ID顯示爲頁面。它的最基本的結構是這樣的：隱藏頁腳與JS的特定流體頁面

<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）的頁腳仍然存在，除了我不希望它顯示時＃頁1被選中。

我試圖建立一個小的JS，但我的JS是不是很好。這是我的嘗試

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

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

顯然，不工作。這是您可以使用的FIDDLE。

任何想法！？

來源

2014-05-11 LOTUSMS

是的，當然確實:) – LOTUSMS

這是我認爲我見過的最微弱的嘗試。 –

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

你只需要添加的.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/

來源

2014-05-11 15:51:51

更改此

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

要：

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

來源

2014-05-11 15:52:43

隱藏頁腳與JS的特定流體頁面

回答

相關問題