jQuery UI选项卡 - 如何使用向下箭头（而不是标准样式）表示活动选项卡

Question

我的一个服务页面需要内部标签。 我已经在页面中使用了常规的jQuery UI选项卡，我想为内部选项卡使用不同的样式。

许多热门网站使用与主要标签不同的内部标签，方法是使用标签标题的简单文字，标题下方的长下划线和表示所选标签的向下箭头。 （附图）。

您是否知道如何设置jQuery UI选项卡的样式以在选中选项卡时放置向下箭头？

Answer 1

哦，你想知道如何使用css3创建三角形。那么你可以使用css来做到这一点，但是，上面的例子并不完全可能只使用css。您不能在三角形上使用边框，因为它是使用边框创建的。

您可以像这样创建向下三角形

.arrow { width: 0; 
height: 0; 
border-left: 10px solid transparent; 
border-right: 10px solid transparent; 
border-top: 10px solid black; 
}

我在小提琴中创造了你正在寻找的东西。

http://jsfiddle.net/jessekinsman/Mn2sx/

但是，如果你想要完全创建上面的内容，可以使用自定义图标字体作为三角形，然后你可以在其上放置一个文本阴影，它可以有一个笔划。

然而，话虽如此，如果您想要向后兼容并且能够为三角形添加阴影和边框，那么图像将是您最兼容的方法。

Answer 2

您可以尝试在类ui-tabs-active中添加一些css，类似于本网站上显示的内容：http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/

Answer 3

是的，通过使用class =“active”

设置li元素的样式非常简单

像这样的东西

.tabs {
border-bottom: 1px solid #000;
}
.tabs li.active {
border-bottom: 1px solid #fff;
padding: 5px;
background: url(../images/arrow.png) 5px 50%;
}

以上只是示例代码，可以给您一个想法。您必须调整图像值才能使箭头图像正确排列。

但是，我认为您的问题可能更复杂。

您是否在询问如何使用不同的样式设置存在于同一页面上的两个单独的jQuery选项卡？

如果是这种情况，我建议在一个具有唯一类或id的元素中包装其中一个样式。像这样：

<div class="new-tabs"> 
<ul class="tabs">
<li><a href="#">Tab1</a></li>
</ul>
</div>

然后你可以复制tabs.css中的所有样式（我现在不记得css文件的确切名称）并在所有这些规则之前添加类或id。喜欢这个

.tab li { something.... }
.new-tabs .tab li {something...}

Walaa，您现在拥有一组完全独立的容器选项卡样式。

我建议您完成刚刚复制的样式并删除不需要的样式。