Jquery 水平标签库（我不知道怎么称呼它）

我是新来的，但你过去已经帮了我很多。 我正在为我的公司建立一个网站，我在前进中学习。 现在我正在用Dreamweaver和Bootstrap进行构建，但我有一个问题。 我想用公文包添加一个部分（多个部分，但我可以复制和粘贴以获得类似的结果）。 问题是我甚至不知道如何称呼我想要的东西。 我想在一行上有一个4“标签”，如果激活，白色，灰色，如果没有，通过点击顶部的图像，我想一个小箭头（可能是我设计的）指向内容，一些文本和图像

到目前为止，我已经在一些专栏中取得了这样的效果，但这当然不是我想要的，因为我希望底部的内容能够被传播，而不仅仅是在顶部图像的下方

在那之后，我考虑了旋转木马的一些调整，仍然不是我想要的，可能类似，但它不一样。当然，我仍然有图像颜色的问题。事实上，我不知道是必须同时使用这两张图片还是有一个命令

总之，为了给你一个我想要的更好的图像，想象一下Firefox或Chrome标签，如果选中，下面有一个小箭头，选中的图标是白色的。下面是内容，占据整个宽度

如果我说错话，我很抱歉，但正如我所说的，我正在（慢慢地）学习

编辑：下面是一个可视示例：

---

谢谢

可能bootstrap的选项卡将帮助您：

Html代码：

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a data-target="#home" data-toggle="tab">Home <span class="caret"></span></a></li>
    <li><a data-target="#profile" data-toggle="tab">Profile</a></li>
    <li><a data-target="#messages" data-toggle="tab">Messages</a></li>
    <li><a data-target="#settings" data-toggle="tab">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Home</div>
    <div class="tab-pane" id="profile">Profile</div>
    <div class="tab-pane" id="messages">Message</div>
    <div class="tab-pane" id="settings">Settings</div>
</div>

---

工作示例：

不是您问题的答案，但不要使用Dreamweaver。这是网络开发者的噩梦。使用一个现代化的IDE，如bracks.io、atom.io或code.visualstudio.com。@JosephA。不，我不同意你的意见。Dreamweaver对初学者帮助很大。“一个人不需要依赖Dw……就是这样。”约瑟法。正如我所说，我正在学习，我不怕说我是一个noob，我也不喜欢DW，但它给了我一些我正在做的提示，比如模板和其他东西。将来我肯定会去其他地方看看，但现在，这很方便，至少能直观地理解我在做什么。谢谢，这是一个好的开始。有一个问题，我不能在这些选项卡之间来回移动，如果它们被选中，我在刷新之前看不到它们。对选择这些选项卡有什么限制吗？你能给我一些关于它的更多细节吗？我想要一些类似Chrome标签的东西，所以来回切换阅读下面的内容取决于你在顶部选择的内容。我会给你一张我的素描截图。这就是我给出的例子中发生的事情。您可以来回切换以阅读下面的内容，具体取决于您在顶部选择的内容。此外，你们可以用图像替换标签的文本，使其看起来和你们在草图中共享的一样。那个么灰色图像呢？我的意思是，选择时它们应该是白色的，下面有箭头（草图中的箭头），不使用时它们应该是灰色的。有代码吗？再次抱歉，但我对这一切都是新手，Dreamweaver有时也没什么帮助

jQuery(function () {
    jQuery('#myTab a:first').tab('show');
});