jquery 목록 항목 클래스 토글

Question

나는 목록 항목 클래스를 "활성"에서 "비활성"으로 토글하는 간단한 기능을 가지고 있습니다. 다른 모든 목록 항목을 '비활성'으로 설정하여 하나의 '활성'목록 항목 만있을 수있는 가장 효율적인 방법 (즉, 최소한의 코드 사용)은 무엇입니까? 아래 예제를 참조하십시오. 당신이

<ul class="menu"> 
    <li id="one" class="active">One</li> 
    <li id="two" class="inactive">Two</li> 
    <li id="three" class="inactive">Three</li> 
    <li id="four" class="inactive">Four</li> 
    <li id="five" class="inactive">Five</li> 
</ul> 

<script> 
    $('#one').click(function() { 
     if ($(this).hasClass("inactive")) { 
      $(this).removeClass("inactive").addClass("active"); 
     } else { 
      $(this).removeClass("active").addClass("inactive"); 
     } 
    }); 
</script> 

Answer 1

이 작동 할 수 있습니다 감사합니다

$('.menu li').click(function() { 
    $('.menu li').not(this).removeClass('active').addClass('inactive'); 
    $(this).addClass('active').removeClass('inactive'); 
}); 

또는

$('.menu li').click(function() { 
    $('.menu li').removeClass('active').addClass('inactive'); 
    $(this).toggleClass('active inactive'); 
}); 

두 번째 방법은 짧은,하지만 느립니다.

http://jsperf.com/toggle-vs-add-remove

편집 :이 하나가 짧고입니다 빠른 :

$('.menu li').click(function() { 
    $('.menu li').not(this).removeClass('active'); 
    $(this).addClass('active'); 
}); 

성능 당신이 변수에 메뉴를 저장하고처럼,이 변수에 대한 작업을 수행 할 수있는 문제가 정말 경우 :

var $menu = $('.menu li'); 
$menu.click(function() { 
     $menu.not(this).removeClass('active'); 
     $(this).addClass('active'); 
    }); 

Answer 2

$('ul li').click(function() { 
    $('ul li').each(function() { 
     $(this).removeClass('active'); 
    }); 
    $(this).addClass('active'); 
}); 

JSFiddle

Answer 3

SEO가 중요하지 않으며 적은 양의 코드를 사용하려면 라디오 버튼 목록을 사용하는 것이 좋습니다. 그런 다음 ": checked"선택기를 사용하여 JavaScript에서 스타일을 지정하고 상호 작용할 수 있습니다. 간결성을 위해

Answer 4

:

$('ul.menu li').click(function() { 
    $(this).siblings().attr('class', 'inactive').end().toggleClass('inactive active'); 
}); 

JS Fiddle demo (127 문자가 공백 문자 제거 횟수 : 115).

Character-counts at JS Fiddle 간결성이 의도 였기 때문에.

$('ul.menu li').click(function() { 
    var t = this; 
    $(this).siblings().add(t).attr('class', function(){ 
     return t === this ? 'active' : 'inactive'; 
    }); 
}); 

JS Fiddle demo (174 문자, 공백이 제거 된 :

불행하게도, 코멘트에서 확인 된 문제를 주어진 아래의 수정 된 구현은 대안이되고는 (현재 허용 대답)보다 약간 더 장황 문자 수 : 133).

또는 :

$('ul.menu li').click(function() { 
    var t = this; 
    $(this).parent().children().attr('class', function(){ 
     return t === this ? 'active' : 'inactive'; 
    }); 
}); 

JS Fiddle demo (176 문자, 공백 제거 된 문자 수 : 135).

은 물론, 흰색 공간 제거 jQuery를 다소 읽을 수 될 않지만, 여전히 :

• add() : 나는, 어, 도덕적 승리 ...

  참고 문헌을 주장한다.

• attr().
• children().
• end().
• siblings().
• toggleClass().

Answer 5

이미 jQuery UI를 사용하고 있다면 선택 가능한 기능을 활용할 수 있습니다. 그러면 최소한의 코드로 원하는 것을 얻을 수 있습니다. http://jqueryui.com/selectable/