jQuery - Children, Parent, Sibling 수수께끼

Question

사용자가 모든 페이지를 숨기고 특정 페이지를 표시하려고 할 때 .glossnav a 사용자 지정 속성 page=""이 표시하려는 페이지의 ID와 같습니다.

이 관계형을 수행하는 가장 좋은 방법은 무엇입니까? .words div 내에서이 nav 기능을 복제 할 수 있습니까?

부모님의 형제 인 id이 (내 page)와 동등해야합니다. 내가 수행 할 jQuery를 구조 할 방법이 사이 :

<div class="words" id="glossary-C"> 
    <div id="c-page-1" class="glossPage"> 
     <span class="glossBlock"> 
      <strong>Calltime</strong> - The time at which a model must be at the location and ready to work. 
     </span> 
     <span class="glossBlock"> 
      <strong>Call Back/Recall</strong> - after the first casting a callback or recall is held to narrow down the selection process. It is not unusual to get a callback before getting a job or being turned down. 
     </span> 
     <span class="glossBlock"> 
      <strong>Casting</strong> - Castings are notices of modeling jobs which are made to models, casting agencies, or on modeling websites. They show details of the types of models required for an upcoming production. This could mean a call where every model can apply or a date on which (preselected) models introduce themselves to the client, who will then make the final decision. The client sets the requirements and makes his/her choice. 
     </span> 
     <span class="glossBlock"> 
      <strong>Casting Agency</strong> - Casting agencies are agencies specialized in finding talented people for different fields like modeling, singing, acting, dancing and others. They work similarly to scouts. They search for perspective persons that could participate in different kinds of projects like TV, photo, video, advertisement casting and others. Usually the models in a casting agency don’t have an exclusive contract and can work for different agencies. 
     </span> 
     <span class="glossBlock"> 
      <strong>Casting Detail Sheet</strong> - Information sheet for the model, which contains all important information about a casting: call time, direction, client etc. 
     </span> 
     <span class="glossBlock"> 
      <strong>Catwalk/Runway</strong> - Catwalk or runway describes a narrow, usually elevated platform that runs into an auditorium, used by models to demonstrate clothing and accessories during a fashion show. 
     </span> 
    </div> 
    <div id="c-page-2" class="glossPage"> 
     <span class="glossBlock"> 
      <strong>Close Up</strong> - In film, television or photography a close-up tightly frames a person or an object. Close-ups are one of the standard shots used regularly along with medium shots and long shots. 
     </span> 
     <span class="glossBlock"> 
      <strong>Composite Card</strong> - Also referred to as a comp card, sedcard, (zedcard) or model business card. A composite card is a piece of card which is printed with at least two photos of you in various poses, settings, outfits and looks (the widest variety possible). It includes your name, your contact information, usually your agency's info and all your stats. Comp cards come in lots of different formats depending on the city, agency and the type of model you are. Agencies will usually issue comp cards for you after they sign you. A composite card serves as the latest and best of a model’s portfolio and is used as a business card. 
     </span> 
     <span class="glossBlock"> 
      <strong>Copyright</strong> - Copyright is the set of exclusive rights granted to the author or creator of an original work, including the right to copy, distribute and adapt the work. These rights can be licensed, transferred and/or assigned. 
     </span> 
     <span class="glossBlock"> 
      <strong>Cover Shooting</strong> - A photo shooting for a cover of a magazine. Depending on the magazine it has great significance for the awareness of the model. 
     </span> 
     <span class="glossBlock"> 
      <strong>Cuttings</strong> - Documented releases of a model in magazines, catalogs or other Medias. 
     </span> 
    </div> 
    <div class="glossNav"> 
     <a href="javascript:void(0)" page="c-page-1">1</a> 
     <a href="javascript:void(0)" page="c-page-2">2</a> 
    </div> 
</div> 

또한

Answer 1

$('.glossNav a').on('click', function() { 
    var $this = $(this), 
     $selected = $('#' + $this.attr('page')); 

    $this.closest('div.glossNav').siblings().hide(); 
    $selected.show(); 
}); 

제안으로 정의되지 않은, 그것은 HTML-5의 데이터를 사용하는 더 나은 아이디어가 : 여기 내 HTML입니다

$(".glossNav a").on('click', function(){ 

}); 

- 속성 * 속성이 유효하지 않은 경우