jQuery动态下划线 [英] jQuery dynamic underlining

问题描述

我有隐藏的div，我的导航菜单显示/隐藏。当显示/隐藏div时，相应的菜单选项加下划线;意味着前面的div淡出，当前div淡入，下面的下划线。

因此，下划线动态添加/删除动态div后，下划线不会隐藏。感谢您的时间和耐心！

HTML：

$

b $ b

 < div id =nav> 
< a class =homeid =show_brandtitle =THE BRAND> THE BRAND< / a>< br / 
< a class =homeid =show_campaignstitle =CAMPAIGNS> CAMPAIGNS< / a>< br / 
< a id =collectiontitle =COLLECTION> COLLECTION< / a>< br /> 
< a class =homeid =show_inquiriestitle =INQUIRIES>查询< / a> 
< / div> 
< div class =currentid =brand> 
< div class =close>< / div> 
< p>这是内容< / p> 
< / div> 
< div id =campaigns> 
< div class =close>< / div> 
< p>这是内容< / p> 
< / div> 
< div id =inquiries> 
< div class =close>< / div> 
< p>这是内容< / p> 
< / div> 
  

CSS：

 code> #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 ）.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。）。 ）.css（'text-decoration'，'none'）; 
}）; 
  

解决方案

  $ '#about，#campaigns，#inquiries'）。hide（）; 
 $（'。home'）。click（function（）{
 var id = $（this）.html（）.LevelCase（）; 
 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'）; 
 $ b b}）; 
 function showContent（content）{
 content.fadeIn（600）; 
 $（'。current'）。removeClass（'current'）; 
 content.addClass（'current'）; 
} 
 $（'。close'）。 ）.css（'text-decoration'，'none'）; 
}）; 
  

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

解决方案

$('#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动态下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！