jQuery UI标签 - 如何使用向下箭头（而不是标准样式）来表示活动标签页 [英] jQuery UI Tabs - How to represent an active tab using a down arrow (instead of the standard style)

问题描述

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

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

您知道如何在选择标签时为jQuery UI标签设置向下箭头吗？

解决方案

你想知道如何使用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 /

但是，如果你想创建你上面的内容，你可以使用自定义图标字体为三角形，然后你可以放一个文本阴影它可以有一个中风。

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

One of my service pages needs inner tabs. I already use regular jQuery UI Tabs in the page and I would like to use a different styling for the inner tabs.

Many popular sites use inner tabs differently from the main tabs by using simple text for the tabs titles, a long underline beneath the titles and a down arrow to represent the selected tabs. (image attached).

Do you know how to style jQuery UI Tabs to place a down arrow when the tab is selected?

解决方案

Oh you want to know how to create the triangle using css3. Well you can do this using css, however, your example above isn't completely possible only using css. You can't have a border on the triangle as it is created using borders.

You create the downward triangle like this

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

I created what you are looking for in a fiddle.

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

However, if you want to create exactly what you have above, you could use custom icon font for the triangle then you could put a text-shadow on it and it could have a stroke.

However, that being said, if you want backward compatibility and the ability to add shadows and border to the triangle, an image is going to be your most compatible approach.

这篇关于jQuery UI标签 - 如何使用向下箭头（而不是标准样式）来表示活动标签页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！