Question

我正在处理单页网站，每个页面都组织成部分标记。每个部分都放在一起。我需要一种使用jquery的方法，基于当前位置，DOM将隐藏其余部分。例如:(关于链接按下会带你到关于部分）

我目前的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;
}

Answer 1

您可以通过注册hashchange回调来实现此目的，其中读取当前window.location的哈希部分。您可以选择不同于id的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">

Answer 2

使用数据索引代替#id。

在所有li上添加数据索引

<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>

有关详细信息，请参阅此工作fiddle

Answer 3

你应该给每个部分一个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();
    });
});

这两种方法都允许使用动态内容，但我个人会使用最后一种方法。

Answer 4

在链接中添加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

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

4 个答案: