jQuery Powered Website With Only 9 Lines.

Posted on July 26th, 2015. Written by Dave.

Update : As user Pedro so rightly commented below I left out quite a vital feature of the website. This wasthe ability to link to pages. I have edited the code below to include this feature (And at the same time reduced the lines of code needed to 8 )

Here is a tutorial on how to create an extremely simple jQuery powered website.

Check out the demo

The whole site is powered by just 9 lines of code :

<script type="text/javascript">

$(document).ready(function() {

	/*Set the home page*/
        var current_page = location.href.indexOf("#") != -1 ? window.location.hash.substring(1) : 'home.html';
      
        /*Load the home page into the div with class 'content'*/
	$('.content').load(current_page);

	/*When a user clicks a menu link take the href value and load the corresponding
	page into the contnt div*/
	$('.menu a').click( function () {
		var current_page = $(this).attr('href').substring(1);
		$('.content').load(current_page); 
	});
});
</script>

First we’ll have a look at the menu

<div class="menu">
    <ul>
      <li><a href="#home.html">Home</a></li>
      <li><a href="#about.html">About</a></li>
      <li><a href="#contact.html">Contact</a></li>
      <li><a href="#links.html">Links</a></li>
  </ul>
</div>

Each link in the menu has a unique href value, this value is a reference to a corresponding HTML file within the websites folder. When a user clicks on one of these links the div with the class ‘content’ is updated with the contents of the page listed in the href :

	$('.menu a').click( function () {
		var current_page = $(this).attr('href').substring(1);
		$('.content').load(current_page); 
	});

The above shows how this is done. The jQuery function which loads the page is the ‘load’ function. You can read more about it here.

Thats about it for all the jQuery used. To check out the demo or have a look at the source have a look before.

Check out the demo

Dave