jQuery: addClass at onclick

JavaScript
1

Hi,
I would like to add a class to the <li> or <a> tag when a particular link is clicked. This is the html,

<ul>
            <li><a href="#" onclick="loadPage('1.php'); return false;">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
</ul>

jquey’s ajax,

function loadPage(parameter) {
this.addClass('current');
$("#content").html('<div id="ajaxloader"><p><img src="img_iconies/loader_0.gif"/> loading...</p></div>');
$("#content").load( "incl_contents/" + parameter, {}, function(){ //calling the ajax then with a callback afterwards
 	$("#content").css({display:'none'})
	.fadeIn("slow");
 	});
}

it works fine until i put this line in,

this.addClass('current');

I think it is probably it is incorrect the way i try to add the class to the link.

Many thanks if u have any ideas.

Lau

2

this refers to the jQuery object rather than the DOM element. Do this:

$(this).addClass('current');
3

i have tried this but it doesnt work too,

$(this).addClass("current");
4

My apologies, I wasn’t reading it properly. It is best if you do this:

<ul id="pageloaders">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
</ul>


$('#pageloaders li').click(function() {
  $(this).addClass('current');
  var parameter = $(this).text() + '.php';
  $("#content").html('<div id="ajaxloader"><p><img src="img_iconies/loader_0.gif"/> loading...</p></div>');
  $("#content").load( "incl_contents/" + parameter, {}, function(){ //calling the ajax then with a callback afterwards
 	$("#content").css({display:'none'})
	.fadeIn("slow");
 	});
}

Now it applies the function to all the LI elements in there, and each automatically calls X.php, where X is the numbers 1,2,3.

5

thank you very much. it works perfectly now.
cheers,
L:D