仅在选项卡处于活动状态时显示箭头

Question

jsfiddle：http://jsfiddle.net/PBvk9/

我希望其相应标签的箭头仅在标签处于活动状态时显示。有人可以帮助我吗？

Answer 1

我改变了您的CSS以考虑active类：

http://jsfiddle.net/5Vgff/

这是相关部分：

ul.tabs li.popular-posts.active .tab-arrow { background:url("http://img88.imageshack.us/img88/9985/tab1active.png") no-repeat scroll 0 0 transparent;bottom:-5px;height:5px;position:absolute;right:44px;width:11px }
ul.tabs li.lorem-ipsum-1.active .tab-arrow { background:url("http://img255.imageshack.us/img255/4915/tab2active.png") no-repeat scroll 0 0 transparent;bottom:-5px;height:5px;position:absolute;right:44px;width:11px }
ul.tabs li.lorem-ipsum-2.active .tab-arrow { background:url("http://img232.imageshack.us/img232/4931/tab3active.png") no-repeat scroll 0 0 transparent;bottom:-5px;height:5px;position:absolute;right:44px;width:11px }

Answer 2

只需将其添加到样式表

即可

.tab-arrow{display:none;}
.active .tab-arrow{display:inline;}

基本上，除了那些有活跃父母的箭头外，它隐藏了所有箭头。适合我。

http://jsfiddle.net/bPzFp/

Answer 3

ul.tabs li .tab-arrow {
    display: none;
}
ul.tabs li.active .tab-arrow {
    display: block;
}

updated demo