0

主に Spry タブ付きパネルで構成されるサイトを持っています。

現在、別のタブをクリックすると、タブの変更に伴ってコンテンツが変更されます。しかし、タブのコンテンツ内にリンクがあり、同じタブ内の別のページにリンクしたいと考えています。どうすればいいですか？

ウェルズ・ファーゴのサイトで私が話していることの例を次に示します。

最初のタブ: https://www.wellsfargo.com/investing/retirement/ira/

タブ内のリンクをクリックしました (ただし、タブは変わりません): https://www.wellsfargo.com/help/faqs/investing/ira

そして、私のサイトのコンテキストで回答を表示したい場合は、ここに私のサイトがあります:

http://emilymagnuson.com

4

1 に答える 1

1

私の理解では、タブ付きパネル内にページを作成したいと考えています。解決策として、Spry Tabbed Panel内に別の Spry Tabbed Panel を作成することが考えられます。

サンプルリンクで編集：ソースコードは次のとおりです。

<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 ) - 2 番目のタブなど。

于 2013-02-18T15:54:54.847 に答える