Skip to content

Instantly share code, notes, and snippets.

@bchristie

bchristie/app.js

Last active December 23, 2015 21:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bchristie/6699988 to your computer and use it in GitHub Desktop.
Save bchristie/6699988 to your computer and use it in GitHub Desktop.
Download ZIP
- Create an HTML file for each page (so browsers with no javascript can still view each page - Supplement page navigation with AJAX loading (when applicable)
Raw
app.js
;(function($){
// targe the tab elements
$('#tabcontent1,#tabcontent2').click(function(e){
// store some references
var $this = $(this),
content = $this.data('content'),
$content = $(content);
// hide all tabs, and show the one we're trying to view
$('div.tab').hide();
$content.show();
// check if the tab has any content. If not, go fetch it dynamically
if ($content.empty()){
$content.load($this.prop('href') + ' ' + content, function(){
// this prevents the contents from nesting duplicate IDs
// see http://stackoverflow.com/questions/2825220/jquery-load-retrieving-partial-page-content-causes-duplicate-id-in-dom
$(this).children().unwrap();
});
}
// stop the link from executing
e.preventDefault();
});
})(jQuery);
Raw
contact.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Contact | My Website</title>
<style type="text/css">
.tab:empty { display: none; }
</style>
</head>
<body>
<!-- tab navigation -->
<ul>
<!--
Specify a href="" so browsers that don't use javascript know where to visit
We also use data-content to specify which <div> has the page's content we want to show.
-->
<li><a href="index.html" id="tabcontent1" data-content="#content_1">Home</a></li>
<li><a href="contact.html" id="tabcontent2" data-content="#content_2">Contact</a></li>
</ul>
<!-- tab content (only populate current page's contents) -->
<div class="tab" id="content_1"></div>
<div class="tab" id="content_2">
This is the contact page.
</div>
<!-- load in the scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Index | My Website</title>
<style type="text/css">
.tab:empty { display: none; }
</style>
</head>
<body>
<!-- tab navigation -->
<ul>
<!--
Specify a href="" so browsers that don't use javascript know where to visit
We also use data-content to specify which <div> has the page's content we want to show.
-->
<li><a href="index.html" id="tabcontent1" data-content="#content_1">Home</a></li>
<li><a href="contact.html" id="tabcontent2" data-content="#content_2">Contact</a></li>
</ul>
<!-- tab content (only populate current page's contents) -->
<div class="tab" id="content_1">
This is the index page.
</div>
<div class="tab" id="content_2"></div>
<!-- load in the scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment