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

在帮助朋友使用该站点时，我（在大量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（文档）.ready（函数（$）{
var url=window.location；
$（'#导航菜单li a[href=“+url+””）.addClass（'active'）；
});

---

我的问题是，我还需要一个图标出现在每个菜单项的左侧，当它被选中时（不是悬停）。如何在前面的JQuery代码中添加一个不可见的DIV？我愿意接受不使用JQuery的建议。

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

像这样

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

---

如果创建一个将div显示为未隐藏的类，则可以使用与将该类添加到隐藏的div相同的代码

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

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

---

希望这有助于将该图像的可见性属性设置为true（如果链接属于活动类）

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

---

可能的重复：简而言之，css带有背景图像和一些填充物，为图像/图标留出空间。如果你的站点中有大量的小图片，也可以查看sprite表单，以及如何使用CSS引用sprite中正确的x/y坐标以用作图像。@FrançoisWahl没有检查重复：P。。（对精灵来说，这是一个很好的观点）谢谢你的反馈……在再次处理这个问题之前，我已经着手处理其他紧迫的问题。我已经采纳了您的建议，添加了背景图像，但无法将其移出“活动”菜单链接的范围。我试过对这个职位的负面评价，但它不起作用……想法？工作：

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