AJAX tabs function only works once

Hey,

I’m hoping this is a simple fix, but I have a function that populates the main div on the page according to the tab clicked (a div).

It works great when you click the first tab, but if you go to click anymore after that, it simply doesn’t work.

Here’s the tabs code:

[CODE]<div class=”hovermenu_home” id=”tab1″ onclick=”getTabData(1)”>Tabloids</div>
<div class=”hovermenu_home” id=”tab2″ onclick=”getTabData(2)”>Blurbs</div>
<div class=”hovermenu_home” id=”tab3″ onclick=”getTabData(3)”>Charts</div>
<div class=”hovermenu_home” id=”tab4″>Stars</div>[/CODE]

And here’s the Javascript, which resides at the bottom of the page:

[CODE]function getTabData(id) {
if (id == 2) {
var url = ‘../core3/feeds/blurbFeed.php’; }
else if (id == 3) {
var url = ‘../core3/feeds/test.php’; }
else if (id == 4) {
var url = ‘../core3/feeds/tabloid_feed.php’; }
else {
var url = ‘../core3/feeds/tabloid_feed.php’; }

var rand = Math.random(9999);
var pars = ‘id=’ + id + ‘&rand=’ + rand;
var myAjax = new Ajax.Request( url, {method: ‘get’, parameters: pars, onLoading: showLoad, onComplete: showResponse} );
}
function showLoad () {
$(‘load’).style.display = ‘block’;
}
function showResponse (originalRequest) {
var newData = originalRequest.responseText;
$(‘load’).style.display = ‘none’;
$(‘feed_main’).innerHTML = newData;
}[/CODE]

Any ideas? I just started learning JavaScript coming from a strong HTML/CSS/PHP background and I just don’t have any major flaw jumping out at me.

Thanks in advance!

Also in #JavaScript _↴