Changing content on the same html file/page

Question

I am not sure how to explain my question, so I could not find anything by searching,but i will do my best to explain it.

I\'m just starting to learn html/css and i a

Answer 1

jQuery solution...here's a FIDDLE

To be able to use this you must include jQuery in the section of your HTML document. e.g.

---

  

    

      
Section 1
      
Section 2
      
Section 3
      
Section 4
    
  

  

    

      
Section 1
    
  

  

    

      
Section 2
    
  

  

    

      
Section 3
    
  

  

    

      
Section 4
    
  

---

.wrapper {
  position: relative;
  width: 960px;
  padding: 10px;
}
section {
  background: #7f7f7f;
  position: absolute;
  display: none;
  top: 10px;
  right: 0;
  width: 740px;
  min-height: 400px;
  color: #fff;
  border: 4px solid #000;
}
section:first-of-type {
  display: block;
}
nav {
  float: left;
  width: 200px;
}
ul {
  list-style: none;
}
li {
  background: #c3c3c3;
  width: 100%;
  height: 32px;
  line-height: 32px;
  margin-bottom: 10px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  border: 4px solid #000;
}
.active {
  background: #7f7f7f;
}

---

Put this script just before the tag.

If you wanna use AJAX for getting content

Of course first include jQuery library in your document like in previous example

then

1. Create folder includes in your root folder then in includes folder create folder named ext-content then in folder ext-content create couple of HTML documents named e.g content1.html, content2.html ... with different content you wish to show of course without doctype and other stuff from index page just simple content.
   
   example of content page
   
   

   Content

2. Change previously created navigation into this

   
     
   
       
   Section 1
       
   Section 2
       
   Section 3
       
   Section 4
     
   
   

3. Leave only one section and in that section create div with class ext-content like below

4. Use this script instead of one in the previous example

   $('nav li').click(function() {
     $.ajax({
       type: 'GET',
       url: 'includes/ext-content/'+$(this).data('content')+'.html',
       dataType: 'html',
       success: function(response) {
         $('.ext-content').html(response);
       }
     });
   });
   

*Note: You don't need to use sections, articles e.t.c. you could use divs, spans...