load html into div, menu, switch

Question

I need to finish javascript for load html page into div. I want load page1,page2 and so on into div id="content". If someone help me I will grateful. Thanks

Here is jsfiddle of this code

HTML

<div id="menu">
<nav>
<ul>
<li ><a  class="active" href="1.html" ><b>Page1</b></a></li>
<li ><a  href="2.html" ><b>Page2</b></a>

</li>                                        
<li ><a   href="3.html"><b>Page3</b></a>

</li>
<li ><a  href="4.html"><b>Page4</b></a></li>
<li ><a  href="5.html"><b>Page5</b></a></li>
</ul>
</nav>   
</div>

<div id="content"> </div>

CSS

nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: rgb(1, 1, 1);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
font-family: Times New Roman;
font-size: 70%;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li {
float: left;
font-family: Arial;
font-size: 1;
}
nav ul li a:hover, nav ul li a.active, nav ul li a.visited {
background: rgb(177, 2, 10);
}
nav ul li:hover a {
color: rgb(255, 255, 255);
}
nav ul li a {
display: block;
padding: 5px 45px;
color: rgb(255, 255, 255);
text-decoration: none;
position: relative;
}
#menu {
position: relative;
width: 780px;
height: 35px;
left: 50%;
margin-left: -388px;
overflow: hidden;
top: -20px;
}

#content {
position:       relative;
float: center;
width: 770px;
height: 670px;

clear:both;
margin:     0 auto;
border-radius: 7px;
overflow: hidden ;
top: 0px;
border: 3px solid black;
}

JAVASCRIPT

$(document).ready(function(){
$('nav ul li a').click(function(){
   $('nav ul li a').removeClass('active');
   $(this).addClass('active');
});    



});

Answer 1

Use $.get.

$(document).ready(function(){
    $('nav ul li a').click(function(e){          // when a nav link ('a' tag) is clicked...
        $('nav ul li a').removeClass('active');  // remove the css class "active" from any nav links.
        $(this).addClass('active');              // add the css class "active" to the one we clicked

        e.preventDefault(); // <-- important!    // prevent the page from navigating away
        var page = this.href;                    // get the url the link would normally go to
        $.get( page, function( data ) {          // in the background, get the content of the page for the link we have clicked
          $( "#content" ).html( data );          // load the content we have into the element with id "content"
        });
    });       
});

If you're saying that the page is empty when you first load it, that's expected. If you want it to load something, you'll need to manually fire off the click event when the page loads.. something like:

$('nav ul li a.active').click();                  // Get the nav link which has class "active", and fire the click() event.

... should do the trick.

Note -- fiddle won't work, as it doesn't support AJAX stuff very well.
Second Note - George's answer is a simpler version of this. Use that. :)

Answer 2

Assuming your href reference the file with the contents that you want to show, you can use .load(). You can get the href property using .prop().

Prevent the default action (redirecting to a new page) when your anchors are clicked.

You may also want to trigger the this functionality on page load for the .active nav button. I've added a filter and a click trigger afterwards for this reason.

$(document).ready(function () {
    var $navAnchors = $('nav ul li a');
    $navAnchors.click(function (e) {
        var $this = $(this);
        e.preventDefault();
        $navAnchors.removeClass('active');
        $this.addClass('active');
        $('#content').load($this.prop('href'));
    }).filter('.active').click();
});

Notice I've assigned your matching jQuery collection to a variable, to save you making repeat selections. This way nav ul li a is only searched for once, on DOM load.