0

在帮助这个网站的朋友时，我已经设法（在很多 SO 帮助下）使用 JQuery 在相关页面上突出显示活动菜单标题。“活动”类已添加到列表项的“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 的建议。

4

3 回答 3

0

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

像这样 。

.active{
background: url('location') no-repeat 0% 50%;
padding: 10px //some value
}
于 2012-09-19T21:59:14.337 回答
0

如果您创建一个将 div 显示为未隐藏的类，那么您可以使用相同的代码将该类添加到隐藏的 DIV 中。

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

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

然后，如果您使用 JQuery 为 .button-holder 提供 .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;
}

希望这可以帮助

于 2012-09-19T22:00:52.163 回答
0

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

var icon_visibility = $('#link').hasClass('active') ? 'visible' : 'hidden';
$('#icon').css('visibility', icon_visibility);
于 2012-09-19T22:05:01.037 回答