-1

Ok, so lets say that I have navbar eg.

<ul> <li class="selected">home</li> <li>about me</li> <li>contact</li> <ul>

and I have a content on a page that I want to change depending on which <li> is selected without reloading the whole page. It seems a bit pointless to reload the whole page just to update 2 divs.

eg. when home is selected I want to load home.php included in <div class='content'> + change class of <li> home</li> to selected etc.

should I use AJAX for this? or should I use $_GET -> altering the URL?

I am a beginner -> sorry for basic questions.

Thx for any kind of help!

user3294559
  • 31
  • 1
  • 1
  • 2

2 Answers2

2

You can use Ajax.

But if you're total beginner, another solution without Ajax :

• put all your content in a single file

• put IDs on your div, related to the content (div containing "about" content = div#about)

• just toggle the div on click, related to the content

Like this (JS with jQuery) :

$(document).ready(function(){
  $('nav a').click(function(){
    var dest = $(this).attr('href');
    $('div.content').fadeOut(); // Hide all content divs
    $(dest).fadeIn(); // Show the requested part
    // You can do all of this using addClass / removeClass and use CSS transition (smoother, cleaner);
  return false;  
});
});

HTML updated:

<ul> <li class="selected"><a href="#home">home</a></li> <li><a href="#about">about me</a></li> <li><a href="#contact">contact</a></li> <ul>

If you had no idea of what is Ajax, I guess this solution is better for you.

enguerranws
  • 8,087
  • 8
  • 49
  • 97
0

To change part of your page from a new request, use Ajax. You can find a lot about it online.

That said, using ajax for basic navigation of a simple website is bad taste. Just do a normal navigation.

Joeri Hendrickx
  • 16,947
  • 4
  • 41
  • 53