Question

I have a page with multiple divs, these are used to make tabs with jquery.

I am loading in external pages with php like mysql data with pagination etc.

what i want is when a user clicks a link in each div it replaces the div with content from that url.

e.g.

<div id="home">
<a href="home1.php">Home1</a>
<a href="home2.php">Home2</a>
</div>

<div id="music">
<a href="track.php?tid=1">Track 1</a> - <a href="artist.php?aid=3">Artist</a>
<a href="music.php">First</a> <a href="music.php?page=1">Page 1</a> <a href="music.php?page=2">Page 2</a> 
</div>

so when i click home1 it replaces the home div with home1.php
when i click page 1 it replaces music div with music page 1 etc.

How do i do this? i have been looking at jquery click() and replacewith() but have not yet worked out how to do it.

Thanks.

Answer 1

Attach an event to the links you want this feature active on – you can do that by either adding a class to the links – ie

<div id="home">
<a class="livelink" href="home1.php">Home1</a>
<a class="livelink" href="home2.php">Home2</a>
</div>

<div id="music">
<a class="livelink" href="track.php?tid=1">Track 1</a> - <a class="livelink" href="artist.php?aid=3">Artist</a>
<a class="livelink" href="music.php">First</a> <a class="livelink" href="music.php?page=1">Page 1</a> <a class='"livelink" href="music.php?page=2">Page 2</a> 
</div>

And then binding the click event to all those anchors :

$('.livelink').click(function(event) {
  $(this).parent('div').load($(this).attr('href')); //load the data
  event.preventDefault(); // prevent the browser from following the link
});

or by activating all links

$('div a').click(function(event) {
  $(this).parent('div').load($(this).attr('href'));
  event.preventDefault; // prevent the browser from following the link
});

I think you are better using the first method as you have more control