javascript - 单击时带有指针的脚本行

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

您发布的页面中的那个使用一个简单的图像
作为一个<li>元素，该元素具有.current点击类（jQuery）。
该图像以 a 定位background-position: center bottom;并覆盖水平面。天蓝色的线。

Answer 3

演示：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该类的选项卡有一个 27px 高的箭头图像，位于选项卡底部的正下方。他们也可以这样做而不是使用背景图像：

.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;
}

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