Using javascript to remove link formatting on click

Question

I'm using javascript (and jQuery) to move between three box descriptions.

Javascript

<script type="text/javascript">
    $(document).ready(function() {
        $('#foo-box').show();
        $('#bar-box').hide();
        $('#bob-box').hide();

      $('#bar-link').click(function() {
        $('#foo-box').hide();
        $('#bob-box').hide();
        $('#bar-box').show();
         return false;
      });
    });
</script>

html

<div id="stuff">
    <a href="" id="foo-link">Foo</a>
    <a href="" id="bar-link">Bar</a>
    <a href="" id="bob-link">Bob</a>
    <div id="foo-box">Hello</div>
    <div id="bar-box">World</div>
    <div id="bob-box">!!!</div>
</div>

But after clicking on a link I want it to be normal text. I can't seem to figure out a good, elegant way of doing this in javascript (I've found a few ways that may work, but are basically hacks).

Am I just being thick?

Answer 1

maybe jquery replaceWith() would help?

  $('#bar-link').click(function() {
    ...
     $(this).replaceWith($(this).text());
     return false;
  });

Answer 2

$('#bar-link').click(function() {
        $('#foo-box').hide();
        $('#bob-box').hide();
        $('#bar-box').show();
        $(this).css('text-decoration', 'none');
         return false;
      });

Answer 3

$("a").click(function() {
    $(this).addClass("visited");
}

.visited {
    color: black;
    text-decoration: none;
}