Проблемы с реализацией вложенных вкладок с помощью пользовательского интерфейса jQuery

Question

Я использую Ruby on Rails 3.0.9, jQuery 1.6.2 и jQuery UI.Я пытаюсь реализовать вложенные вкладки, следуя, как можно лучше, документации , но при использовании AJAX я получаю "странное" поведение для этих вложенных вкладок.

У меня две вкладки (tab1 и tab2) каждая имеет две вложенные вкладки (tab1_sub1 и tab1_sub2 вложенные \ относятся к tab1, tab2_sub1 и tab2_sub2 вложены \ относятся к tab2).

После загрузки страницы, содержащей упомянутые вкладки, выходной HTML-код будет:

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
          <a href="#tabs-1">
            tab1 title
          </a>
        </li>
        <li class="ui-state-default ui-corner-top">
          <a href="#ui-tabs-1">
            tab2 title
          </a>
        </li>
  </ul>

  <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
    <div id="tabs_sub1" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
      <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
          <a href="#tabs_sub1-1">
            tab1_sub1 title
          </a>
        </li>
        <li class="ui-state-default ui-corner-top">
          <a href="#ui-tabs-2">
            tab1_sub2 title
          </a>
        </li>
      </ul>

      <div id="tabs_sub1-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        tab1 content
      </div>

      <div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
    </div>
  </div>

  <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>

В настоящее время при отображении контента tab1, tab1_sub1 и tab1_sub2 работают, а также.

Теперь, нажав на заголовок tab2, вы получите HTML-код:

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top">
          <a href="#tabs-1">
            tab1 title
          </a>
        </li>
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
          <a href="#ui-tabs-1">
            tab2 title
          </a>
        </li>
  </ul>

  <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
    <div id="tabs_sub1" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
      <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
          <a href="#tabs_sub1-1">
            tab1_sub1 title
          </a>
        </li>
        <li class="ui-state-default ui-corner-top">
          <a href="#ui-tabs-2">
            tab1_sub2 title
          </a>
        </li>
      </ul>

      <div id="tabs_sub1-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
        tab2 content
      </div><div id="ui-tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
    </div>
  </div>

  <div id="ui-tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">

    <div id="tabs_sub1" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
      <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
            <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
              <a href="#tabs_sub1-1">
                tab2_sub1 title
              </a>
            </li>
            <li class="ui-state-default ui-corner-top">
              <a href="http://<hostname>/<path>"> # I think here is the problem (read above for more information).
                tab2_sub2 title
              </a>
            </li>
      </ul>

      <div id="tabs_sub1-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
    </div>
  </div>
</div>

Теперь при отображении содержимого tab2, когда я нажимаюв заголовке tab2_sub2 будет загружено содержимое tab2_sub2 в верхней части текущей страницы, а не внутри вкладки tab2_sub2. То есть браузер перейдет по URL-адресу http://<hostname>/<path>.

Проблема (я думаю) заключается именно в следующем коде:

...
  <a href="http://<hostname>/<path>">
...

Возможно, значение href должно быть примерно таким: #ui-tabs-2 (как для \ в содержимом tab1) иможет быть, есть некоторые ошибки jQuery UI, когда вы используете вложенные вкладки таким образом ...

Как я могу это решить?

---

Я пытался решитьпроблема, следующая за это и это , но я не решил это.

Answer 1

Проблема была в tabs значениях идентификатора CSS. Они должны быть разными для каждого атрибута div id HTML, связанного с <div id="tabs" class="...">.

Самое простое решение - установить значения tabs1 и tabs2 id для этих div s.