Question

我的导航菜单显示/隐藏了隐藏的div。显示/隐藏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');
});

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

jQuery动态下划线

1 个答案: