点击它时带有指针的脚本行

Question

我正在试图弄清楚它的正确用语是什么，以便我可以进一步研究和学习。 我遇到了这个标签，你点击一个标题蓝线和一个指针弹出指向选项卡内容...（例如，当你点击书籍，然后点击文章，等等.. 这是一个例子..

http://www.sutherlandlibrary.com/tabs/library-tabs-v4.htm

我想知道如何创建它。或者它是什么？所以我可以开始研究它。

先谢谢了，我知道我想先搜索它，但我不知道从哪里开始。

干杯

Answer 1

寻找CSS3形状，用于实际的尖端事物。

在用于创建选项卡的主要框架中有插件，或者您可以使用一些jQuery创建自定义插件。您需要.on('click, ...)和.fadeIn / .fadeOut

对于标签视图，使用带有position: absolute的容器内每个标签内容的CSS position: relative。

_{（社区维基因为我实际上没有做任何工作）}

Answer 2

演示：http://jsfiddle.net/trevordixon/hvBpF/

每个标签都是<li>，当前选中的标签有一个类current。您会看到他们有以下CSS规则：

.tab-features .tabs-list .current {
    background: url("images/feature-tab-arrow.gif") no-repeat center 27px;
}

因此，具有current类的选项卡具有位于选项卡底部正下方的27像素高的箭头图像。他们也可以做这样的事情，而不是使用背景图像：

.tab-features .tabs-list .current:after {
    content: "";
    width: 0;
    height: 0;
    /* These borders make it a triangle */
    border-left: 14px solid transparent;
    border-top: 14px solid #0088aa;
    border-right: 14px solid transparent;
}

所以要实现这样的东西，找到一个好的标签脚本或插件，并像这样设置当前选中的标签。

Answer 3

您发布的页面中的一个使用简单图像
用于<li>元素，其中点击（jQuery）上有类.current。
该图片的位置为background-position: center bottom;，并覆盖了水平。天蓝线。