jQuery动态下划线
我有导航菜单显示/隐藏的隐藏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>
#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;
}
$('#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'); });