표시/숨기기와 관련된 문제 JavaScript

Question

사용자가 디자인 한 콘텐츠 블록을 바닥 글에 넣을 ExpressionEngine 웹 로그가 있습니다. 그러나 단 한 번에 하나씩 보여줄 것입니다.

내 HTML은 다음과 같습니다

<ul class="footernav"> 
    <li class="first"><a class="active" href="#">Get in touch</a></li> 
    <li><a href="#">Interested in joining?</a></li> 
    <li><a href="#">Feedback</a></li> 
    <li><a href="#">Link 4</a></li> 
</ul> 
<div class="copy gutters show"> 
    <p>Lorem Ipsum</p> 
</div> 
<div class="copy gutters hide"> 
    <p>Lorem Ipsum</p> 
</div> 
<div class="copy gutters hide"> 
    <p>Lorem Ipsum</p> 
</div> 

내가 클릭 링크를 따라 숨기기 클래스 쇼 클래스를 전환하려는. 내가 어떻게 이것을 성취 할 수 있는지 확신하지 못한다. ExpressionEngine에서 사용자가 정의하므로 N 개의 콘텐츠 블록을 처리 할 수있을만큼 유연해야합니다.

저는 JavaScript에 대해 아주 새로운 브랜드입니다. 그래서 나는 이것을 달성 할 수있는 방법에 대한 통찰력이나 해결책을 정말로 고맙게 생각합니다.

Answer 1

나는 이것이 당신의 구조 작업을 것이라고 생각 :

// Cycle through each link in our ul.footernav element 
$(".footernav a").each(function(i,o){ 
    // Attach click-logic to each link 
    $(this).click(function(e){ 
    // Prevent page from bouncing, reloading, etc. 
    e.preventDefault(); 
    // Add .active class to this, but remove from all other links 
    $(this).addClass("active").closest("li").siblings("li").find("a").removeClass("active"); 
    // Show any DIV having class .copy and same index as clicked link 
    // meaning, clicking the second link will show the second div 
    $("div.copy:eq("+i+")").show().siblings("div.copy").hide(); 
    }); 
}); 

데모 온라인 : 도움을 http://jsbin.com/ekecu