在点击菜单项时保留悬停效果

Question

我已经创建了一个。hover效果的导航栏。但我想让我添加的效果在我使用。click时保持不变我还想在点击另一个工具条时删除那个效果。很抱歉让你困惑了:)

我的代码是这样的

html:

<div id="menubar">
    <div class="menubutton">Home</div>
    <div class="menubutton">Dessert</div>
    <div class="menubutton">About Us</div>
</div>

css:

#menubar {
    height: 30px;
    width: 100%;
    background-color: gray;
}
.menubutton {
    height: 30px;
    width: 60px;
    background-color: gray;
    display: inline-block;
    color: black;
    transition: background-color 0.5s ease;
}
.active {
    height: 30px;
    width: 60px;
    background-color: white;
    color: red;
}

jQuery:

$('.menubutton').hover(function() {
    $(this).addClass('active');
},
function() {
    $(this).removeClass('active');
});

Answer 1

添加点击处理程序，

$('.menubutton').click(function() {
    $('.menubutton.active').removeClass('active')
    $(this).addClass('active');
});

<<p> 小提琴演示/strong>

Answer 2

为点击事件创建新类activeClick，因为active类将在悬停时移除事件:-

$(function(){
 $('.menubutton').click(function(){    
   $('.menubutton').removeClass('activeClick');
   $(this).addClass('activeClick');
  });
});

演示

Answer 3

没有测试，只是在编辑器中写了这个:

$(document).on('ready', function() {
    $('.menubutton').on('click', function() {
        $('.menubutton').removeClass('active clicked');
        $(this).addClass('active clicked')
    }).on('mouseenter', function() {
        $('.menubutton.active').not('.clicked').removeClass('active');
        $(this).addClass('active')
    }).on('mouseleave', function() {
        $(this).not('.clicked').removeClass('active')
    });
});

Answer 4

试试这个:

$('.menubutton').click(function() {
    $('.menubutton').not(this).removeClass('active')
    $(this).toggleClass('active');
});