This isn’t the way to build a huge web app, and it’s not super performant, but if you need to alternate between screens in a web app, this is one way to do it.

For what it’s worth, you get similar functionality built into all the JS frameworks; Angular, Backbone, Ember, even jQuery UI. Those ones mostly have each page in separate files, and they load the new page via AJAX, and swap out the content on the fly. We’re going simpler– all our pages will exist the whole time, and we’ll write logic to show and hide them.

Here’s an example on CodePen: http://codepen.io/anon/pen/KdbmG

First, make your screens. I’ve called them “pages” in my code, and they’re really just divs with the class .page

<div class="page" id="home">
	Home page content
</div>
<div class="page" id="page2">
	page 2 content
</div>
<div class="page" id="settings">
	settings content
</div>

Now, in a JS file, let’s write a script to hide all but the first page. It’s simpler than you might think. In human language, this reads “get me all the pages, hide them, narrow the selection down to just the first one, show it.

$(".page").hide().first().show();

Of course, that should be inside a document ready. Everything in jQuery should be inside a document ready.

Next, let’s add some links to the pages, that will take us from page to page.

<div class="page" id="home">
	Home page content<br />
	<a class="pagelink" href="#page2">Take me to page 2</a>
</div>

See how that new link has a class, page_link, so we can treat it specially, and it’s href isn’t to a URL, or even an anchor on the page (not one that exists anyway), it’s to the ID #page2. That won’t do anything yet, we haven’t wired it up yet.

So let’s make the links work. Back in the JS file:

$(".page a.pagelink").on("click", function(e) {
	e.preventDefault();
	var newPageID = $(this).attr("href").replace("#", "");
	changePage(newPageID);
});

So when any .pagelink get’s clicked, we…

1. prevent the browser from it’s default behaviour (navigating away from this page, to the link)
2. getting the href of the link (remember, it’s actually an ID for another “page” in our app), and trim off that pesky “#”.
3. call a new function we haven’t written yet called changePage, with the ID of the page we want to see.

From there, it’s a case of hiding whatever page is currently visible, and showing the new one, the one that ID we just found, refers to. Of course, you’ll want to replace the animation with whatever suits your app.

function changePage(pageID) {
	$(".page:visible").fadeOut();
	$(".page#"+pageID).delay(400).fadeIn();
};

This might be enough for some apps, but I want to add a couple more things.

First, the reason I made changePage a separate function– we can call it from anywhere.  A form validator could call it if validation is passed. A game timer could call it after a certain amount of time (example below).

setTimeout(function() {
	changePage("gameover");
}, 30000)

Let’s add a new feature- events for when a page is shown or hidden.

function changePage(pageID) {
	$(".page:visible").fadeOut().trigger("hide");
	$(".page#"+pageID).delay(400).fadeIn().trigger("show");
};

Adding the above lines makes each page fire two new events, one when the page is hidden, the other when it’s shown. To listen for those events, and say, start a game timer when the user reaches the game page, would be something like this:

$(".page#game").on("show", function() {
	setTimeout(function() {
		changePage("gameover");
	}, 30000);
})

So there you have it, a basic paged web-app in a few dozen lines of jQuery.