Javascript css underline corresponding to toggled divs

Question

Hey all, Earlier I received some help toggling between three hidden divs in a photo library. I'd like to add an underline to the anchors toggling which div to show. The script is dynamic... and therein lies my problem. I'm not sure how to tell which anchor to underline within the code. Suffice it to say that it's beyond my grasp!

I'd also like for the first of the three anchors, Promo, to load underlined.

Thanks for your help!

HTML:

<div class="text" id="content">
    <h2>PHOTOS</h2>
    <hr />
    <p align="left"><a class="showlink" id="show_promo">PROMO</a> <a class="showlink" id="show_studio">STUDIO</a> <a class="showlink" id="show_live">LIVE</a></p>
    <div class="section" id="promo">
        <p align="center">PROMO</p>
        <p align="center">
            <img src="#">
            </p>
    </div>
    <div class="section" id="studio">
        <p align="center">STUDIO</p>
        <p align="center">
            <img src="#">
            </p>
    </div>
    <div class="section" id="live">
        <p align="center">LIVE</p>
        <p align="center">
            <img src="#">
            </p>
    </div>
</div>

Javascript:

$('a.showlink').click(function(){
    var toShow = this.id.substr(5);
    $('div.section:visible').fadeOut(600, function(){
        $('#' + toShow).fadeIn(600);
    });
});

Answer 1

Try this:

$(function(){
  $('a.showlink').css("text-decoration", "none");
  $("#show_promo").css("text-decoration", "underline").click();
});
$('a.showlink').click(function(){
    $('a.showlink').css("text-decoration", "none");
    $(this).css("text-decoration", "underline");
    var toShow = this.id.substr(5);
    $('div.section:visible').fadeOut(600, function(){
        $('#' + toShow).fadeIn(600);
    });
});