Twitter Bootstrap Togglable标签菜单

Question

我正在尝试修改Twitter Bootstrap Togglable标签（tab.js）。我使用的是图像（而另一个是活动状态），而不是使用文本。每次 li 处于“有效”状态和/或点击时，我想使用第二张图片。

下面有一个工作演示，但当 li 处于活动状态或点击时，“活动图像”隐藏在第一张图像下方。我希望“活动”图像能够完全取代第一张图像。

bootply demo of tabs

以下是我如何设置“有效 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

中看到它