Question

我有一个单页网站，其中包含自定义（简单）ul菜单

菜单项基于图像，如5 li，每个50像素x 50像素，每个li项目具有不同的背景图像，当您将鼠标悬停在它们上方时，背景图像会发生变化。

等;

li#home {
    background: url(imagea.jpg);
}

li#home:hover {
    background: url(imagehover.jpg);
}

它工作正常，但问题是它是一个页面的网站，我希望当我在某一特定部分，那些部分＆＃39;菜单的菜单应与悬停时的菜单相同，有点像活动图像。

Answer 1

使用JavaScript向元素添加.active类，并像这样修改css规则。

li#home {
    background: url(imagea.jpg);
}

li#home:hover, li#home.active{
    background: url(imagehover.jpg);
}

jQuery代码：

$("element").on('click', function (){
    $(this).addClass("active");
});

编辑：jQuery演示

HTML

<ul id="menu">
    <li class="menuItem">One</li>
    <li class="menuItem">Two</li>
    <li class="menuItem">Three</li>
    <li class="menuItem">Four</li>
</ul>

的JavaScript

$('li.menuItem').click(function(){
    $('li.menuItem').removeClass('active')
    .filter(this).addClass('active');
})

CSS

li{
    color:blue;
    cursor:pointer;
}
li.active{
    color:red;
}

我做了a Fiddle，看一看。

一页菜单活动状态与悬停相同

1 个答案:

编辑：jQuery演示