Twitter 부트 스트랩 Togglable 탭 메뉴

Question

Twitter 부트 스트랩 Togglable 탭 (tab.js)을 수정하려고합니다. 텍스트를 사용하는 대신 이미지 (그리고 활성 상태의 이미지)를 사용하고 있습니다. li이 "활성"이거나 클릭되었을 때마다 두 번째 이미지를 사용하고 싶습니다.

아래 작업 데모가 있지만 리이 활성화되거나 클릭되면 "활성 이미지"가 첫 번째 이미지 아래에 숨겨집니다. "활성"이미지를 첫 번째 이미지를 완전히 대체하고 싶습니다. 여기

bootply demo of tabs

은 내가 "활성 리"설정을 가지고 어떻게

<li class="active"><a href="#home" data-toggle="tab"><img src="http://i.imgur.com/jZQceNz.png" class="img-responsive" alt="OurStory_gradientbox" height="126" width="222"></a></li> 

내가 사용하고 활성 이미지가 CSS에 (라인 # 25)

Answer 1

임 없습니다 그게 당신이 원하는 것이지만 그것을 할 수있는 간단한 방법은 CSS 규칙에 추가하는 것입니다 :

.nav-tabs > li.active > a > img{ 
    visibility:hidden; 
} 

활성 이미지 위에있는 이미지가 보이지 않게됩니다. 당신은 거기서 행동으로 그것을 볼 수 있습니다 http://bootply.com/83439