使用 HAML 的“jQuery UI 选项卡：不匹配的片段标识符”

Question

在引用选项卡面板的 div 时遇到不匹配的片段错误。选项卡正确呈现，但没有拾取面板。

这是选项卡的 HAML：

%div#tabset
    %ul
        %li
            %a{:href=>"#tour"} Tour
        %li
            %a{:href=>"#events"} Events 
        %li
            %a{:href=>"#deals"} Deals

还有第一个 div 的 HAML：

%div#tour
  /.....yada yada yada

生成的 html 会导致选项卡的锚点：

<a href="#tour">Tour</a>

为 div 生成的 html 包含以下内容：

<div id = "tour">
  ..........
  ..........
  ..........
</div>

面板 div 中的内容在选项卡下方正确呈现，因此很明显锚没有正确调用内容面板 div..似乎无法为 haml 锚找到正确的语法。

任何帮助表示赞赏...

Answer 1

你可以这样做：

 #nameofcontainer
   %ul
      %li= link_to "Tour", "#tour"
      %li= link_to "Events", "#events"

    %div#tour
      // content
    %div#events
      // content

您也可以在顶部执行此操作：

-content_for :head do
  :javascript
    $(function(){
      $("#nameofcontainer").tabs();
    });