Question

在帮助THIS网站的朋友时，我已经设法（有大量的SO帮助）使用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-holder类.active与你的JQuery你也可以操作.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);

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

3 个答案: