jQuery - 요소가 호출되지 않은 경우?

Question

나는 certin 요소 위에 마우스를 올려 놓으면 고유 한 DIV가 표시되고 나머지는 숨김 ... 매우 간단합니다 ...

페이지로드시, div를 "intro" .... div에 표시

내가 달성하고 싶은

이며, 다른 5 개 요소는 마우스 커서를 올려 확인한되지 않는 경우, 인트로 DIV ... 본질적으로 쉽게 설명하자면 너무

, 표시됩니다 :

를

인트로 div 표시 mouseover이 div 클래스를 사용하는 경우 표시하지 않는 경우이 div ID를 표시합니다.

이

$(document).ready(function() { 

$('.intro').show(); 

$('li.members, li.members-active').hover(function() { 
    $('.members-show').show(); 
    $('.brokers-show').hide(); 
    $('.providers-show').hide(); 
    $('.employers-show').hide(); 
    $('.seniors-show').hide(); 
    $('.all').hide(); 
    return false; 
    }); 



$('li.brokers, li.brokers-active').hover(function() { 
    $('.brokers-show').show(); 
    $('.members-show').hide(); 
    $('.providers-show').hide(); 
    $('.employers-show').hide(); 
    $('.seniors-show').hide(); 
    $('.all').hide(); 
    return false; 
    }); 

$('li.providers, li.providers-active').hover(function() { 
    $('.providers-show').show(); 
    $('.brokers-show').hide(); 
    $('.members-show').hide(); 
    $('.employers-show').hide(); 
    $('.seniors-show').hide(); 
    $('.all').hide(); 
    return false; 
    }); 

$('li.employers, li.employers-active').hover(function() { 
    $('.employers-show').show(); 
    $('.brokers-show').hide(); 
    $('.providers-show').hide(); 
    $('.members-show').hide(); 
    $('.seniors-show').hide(); 
    $('.all').hide(); 
    return false; 
    }); 

$('li.seniors, li.seniors-active').hover(function() { 
    $('.seniors-show').show(); 
    $('.brokers-show').hide(); 
    $('.providers-show').hide(); 
    $('.employers-show').hide(); 
    $('.members-show').hide(); 
    $('.all').hide(); 
    return false; 
    }); 

}); 

Answer 1

당신은 크게이를 단순화 할 수 있습니다 :

$(document).ready(function() { 

    $('.intro').show(); // Show the intro by default 
          // Ideally, you'd skip this step and just make sure 
          // the intro was visible on load anyway 

    $('li').hover(function() { // Bind an event handler to every item you want to toggle    
     var associatedDivClass = $(this).attr('class').replace('-active', '-show'); 
     $('.' + associatedDivClass).show(); 
     $('.intro').hide(); 
    }); 
    $('li').mouseout(function() { 
     var associatedDivClass = $(this).attr('class').replace('-active', '-show'); 
     $('.' + associatedDivClass).hide(); 
     $('.intro').show(); 
    }); 

}); 

은 '리'선택을 제한 필요에 따라 당신은 당신이 원하는 항목을 대상으로 그래서 지금까지 사용하고 여기에서

입니다 비녀장.