트위터 부트 스트랩 탭 탐색 - 링크가

Question

레일 4 실패, 루비 2.0

우리는 오른쪽에 탭 탐색 메뉴를 가지고 있지만, 내용, 주요 가기 링크를 컨테이너의로 클릭하고로드 할 때 페이지 (Kit Jacket)가 작동을 멈 춥니 다.

재현 대상 :

모든 컨테이너의 "기타"링크 중 하나를 클릭하십시오. 내용이 창에로드됩니다. 메인 페이지 "Kit Jacket"의 최상위 링크가 작동하지 않습니다. 오른쪽 탐색 창의 다른 탐색 링크를 클릭하십시오. 내용이 창에로드됩니다. "Kit Jacket"에 대한 최상위 링크의 작동 방식.

같은 문제는 탭 패널에없는 바이오 섹션에서 발생합니다.

우리는 (= 데이터 토글 "탭")를 추가로 자바 스크립트를 사용하지 않고 부트 스트랩 탭 마크 업 방법을 사용

페이지 : http://www.entreuse.com/demos

망할 놈의 repo : https://github.com/jaysonperry/entreuseApp/blob/master/app/views/kit/deanorion.html.erb

<div class="kit-content-list"> 
      <h4>In this Kit</h4> 
      <ul class="nav nav-stacked" id="kitContentList"> 
       <li class="active"> 
       <!-- <a href="#jacket" data-toggle="tab">Kit Jacket</a> --> 
       <%= link_to "Kit Jacket", '#jacket', :data => {:toggle=>"tab"} %> 
       </li> 
       <li> 
       <!-- <a href="#pressRelease01" data-toggle="tab">Press Release</a> --> 
       <%= link_to "Press Release", '#pressRelease01', :data => {:toggle=>"tab"} %> 
       </li> 
       <li> 
       <!-- <a href="#bookSummary" data-toggle="tab">Book Summary</a> --> 
       <%= link_to 'Book Summary', '#bookSummary', :data => {:toggle=>"tab"} %> 
       </li> 
       <li> 
       <!-- <a href="#bookOneSheet" data-toggle="tab">Book One-Sheet</a> --> 
       <%= link_to 'Book One-Sheet', '#bookOneSheet', :data => {:toggle=>"tab"} %> 
       </li> 
       <li> 
       <!-- <a href="#blogReviews" data-toggle="tab">Bloggers Reviews</a> --> 
       <%= link_to 'Bloggers Reviews', '#blogReviews', :data => {:toggle=>"tab"} %> 
       </li> 
       <li> 
       <!-- <a href="#amazonReviews" data-toggle="tab">Amazon Reviews</a> --> 
       <%= link_to 'Amazon Reviews', '#amazonReviews', :data => {:toggle=>"tab"} %> 
       </li> 
       <li> 
       <!-- <a href="#interviewQAs" data-toggle="tab">Interview Q & A's</a> --> 
       <%= link_to 'Interview Q & A\'s', '#interviewQAs', :data => {:toggle=>"tab"} %> 
       </li> 
       <li> 
       <!-- <a href="#bioAuthor" data-toggle="tab">Dean Orion Biography</a> --> 
       <%= link_to 'Dean Orion Biography', '#bioAuthor', :data => {:toggle=>"tab"} %> 
       </li> 
      </ul> 
      </div> 

Answer 1

당신은을 클릭 링크를 클릭하면 부트 스트랩에서 클래스 .active을 해당 링크의 부모 <li>으로 설정합니다. 스타일링을위한 후크를 제공하는 것 외에도,이 링크를 다시 클릭하면 부트 스트랩이 페이드 아웃/인 애니메이션을 실행하지 못합니다.

문제는 해당 탭 그룹 외부에서 탭을 트리거하기 때문에 부트 스트랩이 .active 클래스를 제거하지 않는다는 것입니다. 내가 말하는 것에 대해서는 아래 이미지를 참조하십시오.

이 클래스를 제거하고 "키트 자켓"링크를 다시 작동합니다. 삭제 처리를 제안 할 수있는 두 가지 주요 방법이 있습니다.

1. 활성 클래스를 제거하는 "자세히 ..."링크에 수신기를 추가하십시오. 다소 까다로울 수 있으며 실제로 청취자 Bootstrap과 충돌하면 data-toggle 속성을 통해 추가됩니다.

2. "more ..."링크에 data-toggle 속성을 사용하지 마십시오. 대신 "보도 자료"링크에 대한 클릭 동작을 시작하는 리스너를 만듭니다. 당신의 "더 ..."와 "보도 자료"링크에 ID를 추가 한 다음 같은 것을 할 : 나는 완전히 자바 스크립트 솔루션을 따르지 않았고

   $('#morelink').on('click', function(e) { 
       e.preventDefault(); 
       $('#pressrelease').click(); 
   }