如何更改内容，而不更改Spry选项卡式面板的选项卡？

Question

I have a site that consists mainly of Spry Tabbed Panels. 我有一个站点，主要由Spry选项卡式面板组成。

Right now I have it working where you click on a different tab and the content changes with the change of tab. 现在，我可以在您单击其他选项卡的情况下使用它，并且内容随着选项卡的更改而更改。 But now I have links inside of the content of my tabs that I would like to link to a different page but in the same tab. 但是，现在我的选项卡内容中有链接，我想链接到其他页面但在同一选项卡中。 How do I do this? 我该怎么做呢？

Here is an example of what I'm talking about on the Wells Fargo site: 这是我在富国银行网站上谈论的一个示例：

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

Clicked Link In Tab (but the tab doesn't change): https://www.wellsfargo.com/help/faqs/investing/ira 单击“选项卡中的链接”（但选项卡未更改）： https : //www.wellsfargo.com/help/faqs/investing/ira

And if you would like to show me an answer in the context of my site, here is my site: 如果您想在我的网站范围内给我一个答案，这是我的网站：

http://emilymagnuson.com http://emilymagnuson.com

Answer 1

My understanding is that you want to create pages inside a tabbed panel. 我的理解是您想在选项卡式面板中创建页面。 The solution can be: creating another Spry Tabbed Panel inside the Spry Tabbed Panel. 解决方案可以是：在Spry选项卡式面板内创建另一个Spry选项卡式面板。

EDITED with sample Links: Here's the source code: 使用示例链接进行编辑：这是源代码：

<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>

And in your CSS , add this: 在您的CSS中 ，添加以下内容：

.VTabbedPanels .TabbedPanelsTabGroup {
    display: none;
}

Now, the tab inside the tabbed panel is hidden . 现在，选项卡式面板内的选项卡已隐藏 。 Only the content is shown. 仅显示内容。

Also, add this to widen the width of your panel content's content : 另外，添加此内容以扩大面板内容的宽度 ：

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

NOTES: 笔记：

For: 对于：

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

showPanel( 0 ) - 1st tab; showPanel（ 0 ）- 第一个标签； showPanel( 1 ) - 2nd tab, and so forth. showPanel（ 1 ）- 第二个选项卡，依此类推。

如何更改内容，而不更改Spry选项卡式面板的选项卡？

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-02-18 15:54:54

如何更改内容，而不更改Spry选项卡式面板的选项卡？

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-02-18 15:54:54

解决方案1
1 已采纳 2013-02-18 15:54:54