Question

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

Answer 1

Your html remains the same, just remove onclick event and try below js –

$("a").click(function(){
   if($(this).attr("id") == "a1") {
      $("#fillDiv").html("<div>filling 1</div>")
   }
   else if($(this).attr("id") == "a2") {
      $("#fillDiv").html("<div>filling 2</div>")
   }
   else if($(this).attr("id") == "a3") {
      $("#fillDiv").html("<div>filling 3</div>")
   }
});

Here is the fiddle – http://jsfiddle.net/ashwyn/cPZfX/

If your id are gonna be like a1, a2, a3 then you make a loop and do more optimization.