基于当前位置的单页隐藏/显示部分

我正在单页网站上工作，每个页面都组织为部分标签。每节都放在彼此的顶部。我需要一个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

基于当前位置的单页隐藏/显示部分

回答

相关问题