JavaScriptを使用してクリック時のリンク書式を削除する

Question

私は3つのボックスの説明間を移動するのにjavascript（およびjQuery）を使用しています。

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> 

しかし、私は、それは通常のテキストになりたいリンクをクリックした後。私はjavascriptでこれを行う良い、エレガントな方法を理解できないようです（私は動作するかもしれないいくつかの方法を見つけましたが、基本的にはハックです）。

私はちょうど厚いですか？

Answer 1

多分jquery replaceWith()が役に立ちますか？

$('#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; 
}