메뉴 항목 클릭시 호버 효과 유지

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

하는 새로운 클래스 activeClick 만들기 클리 active 클래스와 CK 이벤트가 가져가 밖으로 이벤트를 제거합니다 : -

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

Demo

Answer 2

는 클릭 처리기를 추가

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

Fiddle Demo

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'); 
}); 

Demo