如何使用 Spry 选项卡式面板更改内容而不是选项卡？答案

【问题标题】：How do I change the content but not the tab with Spry Tabbed Panels?如何使用 Spry 选项卡式面板更改内容而不是选项卡？
【发布时间】：2018-04-16 22:33:31
【问题描述】：

我有一个主要由 Spry 选项卡式面板组成的网站。

现在我可以在您单击不同选项卡的地方使用它，并且内容会随着选项卡的变化而变化。但是现在我的标签内容中有链接，我想链接到不同的页面但在同一个标签中。我该怎么做？

这是我在富国银行网站上所说的一个例子：

第一个标签： https://www.wellsfargo.com/investing/retirement/ira/

在选项卡中单击链接（但选项卡不会更改）： https://www.wellsfargo.com/help/faqs/investing/ira

如果您想在我的网站上下文中向我展示答案，这里是我的网站：

http://emilymagnuson.com

【问题讨论】：

标签： tabs spry tabbed

【解决方案1】：

我的理解是您想在选项卡式面板中创建页面。解决方案可以是：在 Spry 选项卡式面板内部创建另一个 Spry 选项卡式面板。

用示例链接编辑：这是源代码：

<body>
<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Main Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Main Tab 2</li>
    <li class="TabbedPanelsTab" tabindex="0">Main Tab 3</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Main Content 1</div>
    <div class="TabbedPanelsContent">Main Content 2
      <div id="TabbedPanels2" class="VTabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">Sub Tab 1</li>
          <li class="TabbedPanelsTab" tabindex="0">Sub Tab 2</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">Sub Content 1
              <li><a href="#">Link here</a></li>
              <li><a href="#">Link here</a></li>
              <li><a href="#" onclick="TabbedPanels2.showPanel(1); return false;">Go to Menu 2</a></li>
             </div>
          <div class="TabbedPanelsContent">Sub Content 2</div>
        </div>
      </div>
    </div>
    <div class="TabbedPanelsContent">Main Content 3</div>
  </div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
</script>
</body>

在您的 CSS 中，添加以下内容：

.VTabbedPanels .TabbedPanelsTabGroup {
    display: none;
}

现在，选项卡式面板中的选项卡已隐藏。只显示内容。

另外，添加它以加宽面板内容的宽度：

.VTabbedPanels .TabbedPanelsContentGroup {
    width: 99%;
    height: 100%;
    border: 0;
}

注意事项：

为：

<a href="#" onclick="TabbedPanels2.showPanel(1); return false;">Go to Menu 2</a>

showPanel(0) - 第一个标签； showPanel(1) - 第二个标签，以此类推。

【讨论】：

感谢您的回复，但这远不是我想要的。当单击选项卡内容内的链接时，我希望顶部选项卡保持不变，但选项卡中的内容会发生变化。单击我在上面附加的 wellsfargo 链接上的链接。它做我想做的事。谢谢！
嗨，艾米丽。是的，我看到了链接。您的意思是，如果我在选项卡式面板的内容中单击链接，另一个页面将显示在同一选项卡中？如果是，我已经编辑了我的答案。
谢谢，但仍然不是我想要的。你给我的东西有 spry 选项卡面板，然后在选项卡内有一个垂直选项卡列表。除了链接之外，我不想要选项卡内容中的任何内容，然后当您单击链接时，顶部选项卡不会更改的新内容。谢谢！
我很难弄清楚您更改了代码的哪一部分，并且在第三个选项卡上放置了一个链接，当您单击链接时，内容发生了变化，我不知道在哪里放第二个内容。 Tumblr 代码让我感到困惑，因为我必须清除 Tumblr 的内容。您可以编辑顶部代码吗？那会有很大帮助！谢谢！
嗨，艾米丽。是的，我已经编辑了代码。检查它并让我知道您是否需要更多说明。 :)