부트 스트랩이있는 필터 기능?

Question

부트 스트랩을 사용하여 ID를 기준으로 div 태그를 필터링하려고합니다. 내 요구 사항은이 페이지 웹 사이트와 비슷합니다. Ashley | One Page Parallax 데이터 필터를 사용해 보았지만이 속성이 저를 위해 작동하지 않았습니다.

여기 내 코드입니다.

<div class="container"> 
    <div class="span12"> 
     <ul class="nav nav-tabs"> 
<li class="active"><a href="#All">ALL</a></li> 
      <li><a href="#Food">Food</a></li> 
      <li><a href="#Drinks">Drinks</a></li> 
      <li><a href="#Parties">Parties</a></li> 
      <li><a href="#Games">Games</a></li> 
</ul> 
    </div> 
    <div class="span12"> 
     <article class="span6" id="Food"> 
      Food #1,Food #2,Food #3,Food #..etc, 
     </article> 
     <article class="span6" id="Drinks"> 
      Drink #1,Drink #2,Drink #3,Drink #..etc, 
     </article> 
    </div> 
    <div class="clearfix"></div> 
     <div class="span12"> 
     <article class="span6" id="Parties"> 
      Party #1,Party #2,Party #3,Party #..etc, 
     </article> 
     <article class="span6" id="Games"> 
      Game #1,Game #2,Game #3,Game #..etc, 
     </article> 
    </div> 
</div> 

누군가 또는 부트 스트랩을 사용하는 작동 예제를 알려주십시오.

Answer 1

나는 내 자신의 질문에 대답하고 있지만 이것은 부분적으로 내 문제를 해결합니다.

1. JQuery 배열 변수에 div ID를 추가 한 다음 함수를 작성했습니다. 매개 변수를 div ID로 전달하면 적절한 div 섹션이 표시되고 나머지는 숨김 모드로 전환됩니다.
2. 누군가가 애니메이션 기능 추가와 같이이 코드를 개선 할 수 있으면 고맙습니다.

여기 내 업데이트 된 코드 및 JS fiddle입니다.

<div class="container"> 
     <div class="span12"> 
      <ul class="nav nav-tabs"> 
       <li><a href="#" onclick="filterdiv1('ALL')">ALL</a></li> 
       <li><a href="#" onclick="filterdiv1('Food')">Food</a></li> 
       <li><a href="#" onclick="filterdiv1('Drinks')">Drinks</a></li> 
       <li><a href="#" onclick="filterdiv1('Parties')">Parties</a></li> 
       <li><a href="#" onclick="filterdiv1('Games')">Games</a></li> 
      </ul> 
     </div> 
     <div class="span12"> 
      <article class="span6" id="Food"> 
       Food #1,Food #2,Food #3,Food #..etc, 
      </article> 
      <article class="span6" id="Drinks"> 
       Drink #1,Drink #2,Drink #3,Drink #..etc, 
      </article> 
     </div> 
     <div class="clearfix"></div> 
     <div class="span12"> 
      <article class="span6" id="Parties"> 
       Party #1,Party #2,Party #3,Party #..etc, 
      </article> 
      <article class="span6" id="Games"> 
       Game #1,Game #2,Game #3,Game #..etc, 
      </article> 
     </div> 
    </div> 

JQuery와 기능 : 부트 스트랩을 통해 3 문서를 보면

filterdiv1 = function (id) { 
     var idarray = ["Food", "Drinks", "Parties", "Games"]; 
     if (id != "All") { 
      idarray = $.grep(idarray, function (value) { 
       return value != id; 
      }); 
      $.each(idarray, function (key, value) { 
       $("#" + id).show("highlight"); 
       $("#" + value).hide("slow"); 
      }); 
     } 
     if (id == "All") { 
      $.each(idarray, function (key, value) { 
       $("#" + value).show("slow"); 
      }); 
     } 
    }