탭 만들기 및 jQuery의 탭 숨겨진 내용 표시/숨기기

Question

그래서 내 시나리오에서 사용할 수있는 탭이 맞지 않을 수도 있지만 여기 상황이 있습니다. jQuery UI 라이브러리도 사용하고 싶지 않습니다. 나는 그것이 더 간단하게 끝날 수 있다고 생각한다.

헤더에

탐색 마크 업 :

<ul> 
    <li><a class="active" href="#" title="">Uno</a></li> 
    <li><a href="#" title="">Dos</a></li> 
    <li><a href="#" title="">Tres</a></li> 
    <li><a href="#" title="">Cuatro</a></li> 
</ul> 

내용에 대한 바디 마크 업 (그들은 같은 사업부에 포함되지 않으며이 될 수 있습니다) : 나는에 노력하고있어

<div class="block"> 
    <p>Lorem ipsum</p> 
    </div> 
    <div class="block"> 
    <p>Lorem ipsum</p> 
    </div> 
    <div class="block"> 
    <p>Lorem ipsum</p> 
    </div> 
    <div class="block"> 
    <p>Lorem ipsum</p> 
    </div> 

두 가지 일을하십시오. 1.) 첫 번째 콘텐츠 블록을 제외한 모든 것을 숨 깁니다 (첫 번째 목록 항목과 일치하므로로드시 .active) 2. 목록 항목 중 하나를 클릭하면 다른 모든 콘텐츠 블록이 숨겨지고 적절한 하나는 탐색에있는 .active 클래스를 추가하는 동안.

정말로 도움을 주실 수 있습니다.

Answer 1

탐색 링크 .... 당신이 섹션에 대한

<div class="sidebar left"> 
       <ul id="navigation"> 
        <li class="active" ><a href="#" >Basic Information</a></li> 
        <li class="inactive"><a href="#" >Profile Picture</a></li> 
        <li class="inactive"><a href="#" >Education And Work</a></li> 
        <li class="inactive"><a href="#" >Social Contact</a></li> 
        <li class="inactive"><a href="#" >Security</a></li> 
       </ul> 
    </div> 

코드 ....

<div class="sec"> 
Section1 
</div> 
<div class="sec"> 
Section2 
</div> 
<div class="sec"> 
Section3 
</div> 
<div class="sec"> 
Section4 
</div> 

위의 HTML에 대한 jQuery 코드는 ... 이렇게 될 수

<script type='text/javascript'> 
     $(document).ready(function() {  

     $('ul#navigation li').click(function(){ 
      var number = $(this).index(); 
      $('.sec').hide().eq(number).show(); 
      $(this).toggleClass('active inactive'); 
      $('ul#navigation li').not(this).removeClass('active').addClass('inactive'); 
     }); 

     $('.sec').not(':first').hide(); 

     }); 
    </script> 

시도해보십시오 ... 작동합니다 ... 알려주세요 ...