基於當前位置的單頁隱藏/顯示部分

我正在單頁網站上工作，每個頁面都組織爲部分標籤。每節都放在彼此的頂部。我需要一個jQuery的方式，基於當前位置，DOM將隱藏其餘的部分。 eg.:(About鏈接壓將帶您到大約節）基於當前位置的單頁隱藏/顯示部分

我現在的DOM結構：

<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Create Single Scroll</title> 

    <!-- custom css --> 
    <link rel="stylesheet" type="text/css" href="style.css"> 



    <!-- bootstrap --> 
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 


</head> 
<body> 

    <nav class="navbar navbar-fixed-bottom navbar-inverse" role="navigation"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html">Create Theme</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse navbar-ex1-collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a href="#about">About</a></li> 
      <li><a href="#services">Services</a></li> 
      <li><a href="#contact">Contact</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container --> 
    </nav> 

<section> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12 col-sm-12 col-xs-12 text-center"> 
       <h1 class="introtext">Title here</h1> 
       <span class="btn buttonborder"> 
        Text placeholder 
       </span> 
      </div> 
     </div><!-- row --> 
    </div> 
</section> 



<section> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12 text-center"> 
       <h1>Test 2</h1> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet scelerisque leo, sit amet adipiscing odio. Praesent leo nisi, placerat in eros in, molestie auctor augue. Sed semper dui est, et facilisis mauris dapibus sed. Maecenas viverra vitae felis vel convallis. Suspendisse malesuada orci non risus dictum pretium. Nulla condimentum vulputate neque nec sollicitudin. Curabitur gravida pulvinar consectetur.</p> 
      </div> 
     </div> 
    </div> 
</section> 

<section> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12 text-center"> 
       <h1>Test 3</h1> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet scelerisque leo, sit amet adipiscing odio. Praesent leo nisi, placerat in eros in, molestie auctor augue. Sed semper dui est, et facilisis mauris dapibus sed. Maecenas viverra vitae felis vel convallis. Suspendisse malesuada orci non risus dictum pretium. Nulla condimentum vulputate neque nec sollicitudin. Curabitur gravida pulvinar consectetur.</p> 
      </div> 
     </div> 
    </div> 
</section> 



<!-- Javascript --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 

<script src="script.js"></script> 



</body> 

</html>

CSS：

body { 
     margin-top: 50px; 
     margin-bottom: 50px; 
     background: none; 
} 

section { 
    width: 100%; 
    height: 100%; 
    position:absolute; 
    top: 0; 
    left: 0; 
}

來源

2014-01-06 Dondada

但在你的HTML代碼 – Kostis

@Kostis沒有關於部分，我不知道我是否應該給每一節自己的ID，例如<部分ID =「約」>或數據索引來代替。我寧願它是動態的，所以數據索引可能是更好的選擇。將每個部分都視爲自己的頁面。 – Dondada

您可以使用創建和刪除對象嗎？ – GroundZero

你應該給每個部分的ID，即。 <section id="about">。

更改您的section CSS來包括display: none屬性

使用下面的JS代碼：

$(document).ready(function() { 
    $('section').eq(0).show(); 
    $('navbar-nav').on('click', 'a', function() { 
     $($(this).attr('href')).show().siblings('section:visible').hide(); 
    }); 
});

或者，如果你遵循嚴格的順序（即約是第一，第二的服務等）：

$(document).ready(function() { 
    $('section').eq(0).show(); 
    $('.navbar-nav').on('click', 'li', function() { 
     $('section').eq($(this).index()).show().siblings('section:visible').hide(); 
    }); 
});

任何一種方法都允許使用動態內容，雖然我個人會使用最後一種方法。

來源

2014-01-06 20:08:04 tenub

這部分將允許您使用簡單的錨定網址（#ID）。http://pastebin.com/RzwZbLxR |從Bootstrap主題順便說一句（時尚組合） – GroundZero

添加一個ID，鏈接

<li><a id="about" href="#about">About</a></li>

添加一個ID，部分

<section id="about-content">

添加一些jQuery的

$("#about").click(function(){ 
    $("#about-content").show() 
    $("#services-content").hide() 
    $("#contact-content").hide() 
})

WORKING EXAMPLE HERE

來源

2014-01-06 20:13:13 Merlin

採用數據索引，而不是#id。

添加上的所有立

<ul class="nav navbar-nav"> 
    <li data-index="about"><a href="#about">About</a></li> 
    <li data-index="services"><a href="#services">Services</a></li> 
    <li data-index="contact"><a href="#contact">Contact</a></li> 
</ul>

的數據索引，然後做同樣的部分

<section class="content" data-index="services"> 
    .... 
</section>

詳情參見

來源

2014-01-06 20:16:33 Kostis

你可以簡單地實現這個這個工作fiddle通過註冊hashchange回調來讀取當前window.location的散列部分。您可以選擇不同的DOM選擇技術。

<script> 
    $(document).ready(function() { 
     $("section").hide(); 

     $(window).on("hashchange", function(){ 
      var hash = window.location.hash.substring(1); // hash part of url withou the first letter (#) 
      $("section").hide(); 
      $("#"+hash).show(); 
     }); 
    }); 
</script>

請注意，用於隱藏和取消隱藏元素的ID也被添加。

<section id="about">

來源

2014-01-06 20:23:32 Bublafus

基於當前位置的單頁隱藏/顯示部分

回答

相關問題