Javascript css подчеркивание, соответствующее переключенным div - PullRequest
2 голосов
/ 10 января 2011

Привет всем, Ранее я получил некоторую помощь, переключаясь между тремя скрытыми элементами в библиотеке фотографий. Я хотел бы добавить подчеркивание для переключения якорей, какой div показывать. Сценарий динамический ... и в этом заключается моя проблема. Я не уверен, как сказать, какой якорь подчеркивать в коде. Достаточно сказать, что это выше моего понимания!

Я бы также хотел, чтобы первый из трех якорей, Promo, загружался с подчеркиванием.

Спасибо за вашу помощь!

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);
    });
});

1 Ответ

3 голосов
/ 10 января 2011

Попробуйте это:

$(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);
    });
});
...