I have 3 anchor (a) tags, all sharing a single div element to act upon. See my html below. Basically, when you click on anchor tag 1, I want it to fill the div with id=fillDiv with html. When you click the second anchor tag, it should wipe that #fillDiv and replace it with new html. How do I set up such a functions. Here is my attempt

HTML:

<div>

<a id=a1 href=javascript: changeDiv();>tag1</a>

<a id=a2 href=javascript: changeDiv();>tag2</a>

<a id=a3 href=javascript: changeDiv();>tag3</a>

</div>



<div id=fillDiv></div>

JS:

function changeDiv(){

     if changeDiv().is('#a1'){

         document.getElementById('fillDiv').html('<div>filling 1</div>');

         }



     elseif

         changeDiv().is('#a2'){

         document.getElementById('fillDiv').html('<div>filling 2</div>');

         }



     elseif

         changeDiv().is('#a3'){

         document.getElementById('fillDiv').html('<div>filling 3</div>');

         }

}

Please NOTE: I do not want to use a show/hide div function, it is important to me that the filling Div is only a single div, not coupled with 2 other divs having display:none properties at start.

Any help appreciated

Thank you