javascript - Single page hideshow section based on current position

I'm working on a single page websites with each page organized into section tags. Every section is placed on top of each other. I need a way with jquery, where based on current position, the DOM will hide the rest of the sections. eg.:(About link pressed will take you to about section)

My current DOM structure:

<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=".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=".10.2/jquery.min.js"></script>
<script src=".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;
}

My current DOM structure:

<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./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./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn./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;
}

Share Improve this question asked Jan 6, 2014 at 19:50 Dondada 4419 silver badges26 bronze badges

but there's no about section in your HTML code – Kostis Commented Jan 6, 2014 at 20:02
@Kostis I don't know if I should give each section its own ID for example <section id="about"> or a data-index instead. I rather it be dynamic so data-index is probably the better choice. Picture each section as it's own page. – Dondada Commented Jan 6, 2014 at 20:03
You could work with creating and removing objects? – BlueCacti Commented Jan 6, 2014 at 20:21

Add a ment |

4 Answers 4

Sorted by: Reset to default 4

You can achieve this simply by registering hashchange callback where hash part of the current window.location is read. You can choose different DOM selection technique than id.

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

Note that ids which are used for hidding and unhiding elements are also added.

<section id="about">

Using data-index instead of #id.

Add the data-index on all 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>

and then do the same for the sections

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

See this working fiddle for more details

You should give each section an id, ie. <section id="about">.

Change your css for section to include a display: none attribute

Use the following JS code:

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

Or if you follow strict ordering (ie. about is first, services second, etc.):

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

Either method allows for dynamic content, although personally I'd use the last method.

Add an id to the links

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

Add an id to the section

<section id="about-content">

Add some jquery

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

WORKING EXAMPLE HERE

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Single page hideshow section based on current position - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)