使用JQuery将DIV添加到活动菜单项

Question

在帮助一位朋友处理THIS站点时，我设法(在很多帮助下)在相关页面上使用JQuery突出显示活动菜单标题。“active”类已添加到列表项的“a”对象中。

<script type="text/javascript">
    jQuery(document).ready(function($){
        var url = window.location;
        $('#nav-menu li a[href="'+url+'"]').addClass('active');
    });
</script>

我的问题是，当每个菜单项被选中时(而不是悬停时)，我还需要一个图标出现在菜单项的左侧。我如何添加到前面的JQuery代码中，以显示原本不可见的DIV？我对不使用JQuery的建议持开放态度。

Answer 1

只需给类一个背景(如果你只是给出箭头或一些基本图像)

就像这样。

.active{
background: url('location') no-repeat 0% 50%;
padding: 10px //some value
}

Answer 2

如果您创建了一个将div显示为未隐藏的类，则可以使用已有的代码将该类添加到隐藏的DIV中。

我个人会做的是将图标嵌套在与按钮其余部分相同的div中，例如：

<div class="button-holder">
     <div class="icon"></div>
     <div class="button-text">Contact Page</div>
</div>

然后，如果您为.button持有者提供带有JQuery的.active类，您还可以操作.icon类

.button-holder {
    /*some properties*/
}
.button-holder .icon {
    /* hide the icon if .button-holder is not active*/
    display: none;
}
.button-holder.active .icon {
    /* if .button-holder is also .active make it visible */
    display: inline-block;
}

希望这能有所帮助

Answer 3

如果链接属于活动类，则将该图像的可见性属性设置为true

var icon_visibility = $('#link').hasClass('active') ? 'visible' : 'hidden';
$('#icon').css('visibility', icon_visibility);