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，您现在拥有一套完全独立的容器内标签样式。

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