JQuery динамическое подчеркивание - PullRequest
Новая
       31

JQuery динамическое подчеркивание

0 голосов
/ 01 марта 2011

У меня есть скрытые элементы, которые показывает / скрывает мое навигационное меню. При отображении / скрытии элементов div соответствующая опция меню подчеркивается; это означает, что предыдущий div исчезает, текущий div исчезает, а подчеркивание следует. Подчеркивание не скрывается, когда вы закрываете div, повторно щелкая его имя в меню.

Поэтому в идеале подчеркивание будет динамически добавляться / удаляться после переключения динамического div.

Спасибо за ваше время и терпение!

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 Ответ

1 голос
/ 01 марта 2011 
$('#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');
});
...