twitter-bootstrap - Twitter Bootstrap 可切换选项卡菜单

Question

我正在尝试修改 Twitter Bootstrap Togglable tabs (tab.js) 。我没有使用文本，而是使用图像（另一个用于活动状态）。每次li处于“活动状态”和/或单击时，我都想使用第二张图像。

我在下面有一个工作演示，但是当li处于活动状态或单击时，“活动图像”隐藏在第一个图像下方。我希望“活动”图像完全替换第一个图像。

选项卡的引导演示

这是我如何进行“活动li ”设置

<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