jQuery dynamic underlining

问题

I've got hidden divs that my navigation menu shows/hides. When showing/hiding the divs, the corresponding menu option is underlined; meaning the former div fades out, the current div fades in, and the underline follows. The underline does not hide when you close a div by re-clicking on its name in the menu.

So ideally the underline will dynamically be added/removed following the dynamic div toggling.

Thanks for your time and patience!

HTML:

    <div id="nav">
        <a class="home" id="show_brand" title="THE BRAND">THE BRAND</a><br />
        <a class="home" id="show_campaigns" title="CAMPAIGNS">CAMPAIGNS</a><br />
        <a id="collection" title="COLLECTION">COLLECTION</a><br />
        <a class="home" id="show_inquiries" title="INQUIRIES">INQUIRIES</a>
    </div>
    <div class="current" id="brand">
        <div class="close"></div>
        <p>this is content</p>
    </div>
    <div id="campaigns">
        <div class="close"></div>
        <p>this is content</p>
    </div>
    <div id="inquiries">
        <div class="close"></div>
        <p>this is content</p>
    </div>

CSS:

#nav {
    width:165px;
    height:100px;
    margin-top:10px;
    color:#000;
    font-size:18px;
    font-family:FuturaStdLightCondensed;
    line-height:120%;
}
.close {
    width:16px;
    height:16px;
    top:0;
    right:0;
    margin:10px 10px 0px 0px;
    position:absolute;
    z-index:4;
    background:url(../images/close.png) no-repeat 0 0;
}
#brand {
    width:300px;
    height:188px;
    top:50%;
    left:50%;
    margin-top:-94px;
    margin-left:-150px;
    position:absolute;
}
#campaigns {
    width:160px;
    height:68px;
    top:50%;
    left:50%;
    margin-top:-34px;
    margin-left:-80px;
    position:absolute;
}
#campaigns a {
    color:#fff;
}
#inquiries {
    width:300px;
    height:500px;
    top:50%;
    left:50%;
    margin-top:-250px;
    margin-left:-150px;
    position:absolute;
}

Javascript:

$('#brand, #campaigns, #inquiries').hide();
$('.home').click(function() {
    var id = $(this).attr("id").replace("show_","").toLowerCase();
    var $content = $('#' + id + ':not(:visible)');
    console.log(id);
    if ($('.current').length === 0) {
        showContent($content)
    }
    else {
        $('.current').fadeOut(600, function() {
            showContent($content)
        });
    }
    $('.home').css('text-decoration', 'none');
    $(this).css('text-decoration', 'underline');
});
function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}
$('.close').click(function() {
    $('.current').fadeOut(600);
    $('.home').css('text-decoration', 'none');
});

回答1:

$('#about, #campaigns, #inquiries').hide();
$('.home').click(function() {
    var id = $(this).html().toLowerCase();
    var $content = $('#' + id + ':not(:visible)');
    if ($('.current').length === 0) {
        showContent($content)
    }
    else {
        $('.current').fadeOut(600, function() {
            showContent($content)
        });
    }
    $('.home').css('text-decoration', 'none');
    $(this).css('text-decoration', 'underline');  

});
function showContent(content) {
    content.fadeIn(600);
    $('.current').removeClass('current');
    content.addClass('current');
}
$('.close').click(function() {
    $('.current').fadeOut(600);
    $('.home').css('text-decoration', 'none');
});

来源：https://stackoverflow.com/questions/5149609/jquery-dynamic-underlining

标签

jquery

class

toggle

hidden

underline