Twitter Bootstrap Togglable選項卡菜單

我試圖修改Twitter Bootstrap Togglable選項卡（tab.js）。我使用的是一個圖像（另一個用於活動狀態），而不是使用文本。我想每次使用第二個圖像時，都會「激活」和/或點擊。Twitter Bootstrap Togglable選項卡菜單

我在下面有一個工作演示，但是當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）

來源

2013-09-26 Mills

我不是確定如果這就是你想要的，但一個簡單的方法來做到這一點將是添加到您的CSS規則：

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

由於活動窗口上的圖像將變得不可見。你可以看到它在那裏的行動http://bootply.com/83439

來源

2013-09-26 19:25:54

我太過複雜了。我只需要在導航菜單中使用的3張圖像即可顯示活動/點擊狀態的第二張圖像。第二個圖像只有較深的顏色和邊框（我想使用圖像而不是css） – Mills

Twitter Bootstrap Togglable選項卡菜單

回答

相關問題