Как изменить содержимое, но не вкладку с панелями вкладок Spry?

У меня есть сайт, который состоит в основном из панелей Spry.

Прямо сейчас у меня это работает, когда вы нажимаете на другую вкладку, и содержание меняется с изменением вкладки. Но теперь у меня есть ссылки внутри содержимого моих вкладок, на которые я хотел бы сослаться на другую страницу, но в той же вкладке. Как мне это сделать?

Вот пример того, о чем я говорю на сайте Wells Fargo:

Первая вкладка: https://www.wellsfargo.com/investing/retirement/ira/

Нажмите на ссылку во вкладке (но вкладка не меняется): https://www.wellsfargo.com/help/faqs/investing/ira

И если вы хотите показать мне ответ в контексте моего сайта, вот мой сайт:

http://emilymagnuson.com/

Источник

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) - 1-я вкладка; showPanel (1) - 2-я вкладка и т. д.

Источник
Другие вопросы по тегам