서브 네비게이션 바

Question

나는 당신이 나에게 도움이 될 수있는 경우 전체 페이지 대신 네비게이션 바의 링크 중 하나를 클릭하면 서브 네비게이션 만 변경되는 방식으로 서브 네비게이션을 어떻게 만들 수 있는지 궁금했다. 많은

http://jsfiddle.net/qrn8Q/

감사합니다 감사합니다.

HTML 코드 :

<header class="header"> 
    <div class="container"> 
     <div class="header-primary_container"> 
      <a class="header_brand" href="#"></a> 
      <div class="navigation-primary_right"> 
       <div class="navigation-primary"> 
        <nav class="navigation-primary_links"> <a href="" class="nav_icon selected">Home</a> 
         <a href="" class="nav_icon">Designs</a> 
         <a href="" class="nav_icon">About Us</a> 

        </nav> 
       </div> 
      </div> 
     </div> 
    </div> 
</header> 
<nav class="sub_nav"> 
    <a href="index.php" class="sub_nav_icon">Home</a> 
    <a href="index.php" class="sub_nav_icon">Sign in</a> 
    <a href="index.php" class="sub_nav_icon">Sign up</a> 
</nav> 
</div> 

Answer 1

당신이해야 할 것은 아약스 또는 iframe을 사용합니다. 해당 링크의 onclick 이벤트의 경우 자바 스크립트 코드를 작성하여 새 콘텐츠를로드 할 수 있습니다.

Answer 2

jQuery로이를 수행 할 수 있습니다. 내 코드를 확인하십시오.

http://jsfiddle.net/mELsr/

$('.nav_icon').click(function() { 
    $('nav.sub_nav:visible').fadeOut(300); // 1 
    $('.selected').removeClass('selected'); // 2 
    var classKey = $(this).attr('id'); // 3 
    $('nav.'+classKey+'_sub_nav').fadeIn(500); // 4 
    $(this).addClass('selected'); // 5 
    return false; // 6 
}); 

일반 영어 : 그것은 매우 간단하고 쉬운 때마다 .nav_icon의 클릭의에, 선택한 그 .nav_icon에서 볼 수 sub_nav (1) 제거 .selected 클래스를 페이드 아웃 (2). 클릭 된 항목의 id 속성 (3)을 가져 와서 그것에 관련된 sub_nav을 찾아서 페이드 인 (4) 한 다음 클릭 된 항목 (5)에 .selected 클래스를 추가하십시오. 마지막으로 return false;에서 링크 기본 동작 (6)을 무시하십시오.

희망을 시작하기 바랍니다.