jQuery UI 选项卡：不匹配的片段标识符

Question

我正在尝试使用 jQuery (UI)、Haml 和 Rails 创建约会调度程序。我正在为接下来的 4 周制作一组标签。

#schedule
  %ul
    - @schedule.each_index do |i|
      %li
        %a{:href => "#schedule-#{i}"} #{@schedule[i][:week_range]}
  - @schedule.each_index do |i|
    %div{:id => "#schedule-#{i}"}
      %p test

理想情况下，这将创建一组标签，例如（12 月 27 日至 1 月 N 日）作为标签标题，然后在每个框中都有“测试”。

在 applications.js 我有：

$('#schedule').tabs();

但是，这不能正确呈现，当我单击一个选项卡时，它会在 javascript 控制台中给我这个错误：

jQuery UI Tabs: Mismatching fragment identifier.

我正在使用最新的 jQuery 和 jQuery UI 版本。

谁能告诉我我做错了什么？

这是相应的 HTML 的样子：

<div id='schedule'>
    <ul>
        <li>
            <a href='#schedule-0'> December 27 - January 2</a>
        </li>
        <li>
            <a href='#schedule-1'> January 3 - January 9</a>
        </li>
        <li>
            <a href='#schedule-2'> January 10 - January 16</a>
        </li>
        <li>
            <a href='#schedule-3'> January 17 - January 23</a>
        </li>
    </ul>
    <div id='#schedule-0'>
        <p>test</p>
    </div>
    <div id='#schedule-1'>
        <p>test</p>
    </div>
    <div id='#schedule-2'>
        <p>test</p>
    </div>
    <div id='#schedule-3'>
        <p>test</p>
    </div>
</div>

Answer 1

您的 ids 在生成的 HTML 中不应包含 #。将%div{:id => "#schedule-#{i}"} 更改为%div{:id => "schedule-#{i}"}