How to update href ID using AJAX

Question

I have a following link in my code:

<li onclick="loadNewPage('test')"><a href="#">Link</a></li>

When the user click this link, I will use xmlHttpRequest to update some content in a DIV on the webpage.

But at the same time, when the user click the link, I want to add an id, so that the state of the button can be changed using CSS. (note the "id" being added to the link)

<li onclick="loadNewPage('test')"><a href="#" id="current">Link</a></li>

At the same time, if these is any other link on the page with the id "current" I want to remove that ID.

Is this possible? How to do this?

Answer 1

It is good practice that every element that you want to handle in your HTML has its own, fixed ID.

I would suggest that your put an id when creating the page. If you want to change something, you may change the class of the element instead of the ID.

Initial:

<li onclick="loadNewPage('test')"><a href="#" id="section_1">Link</a></li>

After clicking:

<li onclick="loadNewPage('test')"><a href="#" id="section_1" class="selected">Link</a></li>

JQuery (amongst other libraries) provide useful methods to retrieve elements of a given class, in order to change them.

Answer 2

Why not have

<li onclick="loadNewPage(this,'test')"><a href="#">Link</a></li>

and

function loadNewPage(theLi,sometext) {
  theLi.className=theLi.className==""?"clicked":"";
}