首页 文章

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

提问于
浏览 次
0

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

现在，我在单击其他选项卡的地方工作，内容随选项卡的更改而变化 . 但是现在我在我的标签内容中有链接，我想链接到不同的页面但在同一个标签中 . 我该怎么做呢？

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

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

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

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

http://emilymagnuson.com

tabs spry tabbed

1 回答

  • 1

    我的理解是你想在选项卡式面板中创建页面 . 解决方案可以是：创建另一个Spry选项卡式面板 inside Spry选项卡式面板 .

    EDITED with sample Links: 这是源代码：

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

    NOTES:

    For:

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

    showPanel（ 0 ） - 1st tab; showPanel（ 1 ） - 2nd tab，依此类推 .

    回复于

相关问题