Question

我有一个主要由Spry Tabbed Panels组成的网站。

现在，我点击不同的标签页，然后内容随标签的更改而变化。但是现在我在我的标签内容中有链接，我想链接到不同的页面但在同一个标签中。我该怎么做？

以下是我在富国银行网站上谈论的一个例子：

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

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

如果您想在我的网站上下载给我一个答案，这是我的网站：

http://emilymagnuson.com

Answer 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 ） - 第二个标签，依此类推。

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

1 个答案: