"jQuery UI Tabs: Mismatching fragment identifier" using HAML

running into the mismatched fragment error when referencing the divs for the tab panels. The tabs render properly but are not picking up the panels.

here's the HAML for the tabs:

%div#tabset
    %ul
        %li
            %a{:href=>"#tour"} To开发者_运维技巧ur
        %li
            %a{:href=>"#events"} Events 
        %li
            %a{:href=>"#deals"} Deals

And the HAML for the first div:

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

the generated html results in an anchor of for the tab:

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

and a generated html for the div containt the content of:

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

the content in the panel divs renders properly below the tabs, so obviously the anchors are not calling the content panel divs properly..can't seem to find the right syntax for the haml anchor.

any help appreciated...

---

You can do it like this:

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

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

Also you can do this at the top:

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