Moving the tabs control outside of the container

Moving the tabs control outside of the container


Hello everybody,
I'm trying to figure out how to use UI Tabs when my structure is
different from the default.
My HTML looks like:
<body>
<div id="header"><ul><li><a href="#tab-1">tab 1</a></li>
<li><a href="#tab-2">tab 2</a></li></ul>
</div>
<div id="content">
<div id="tab-1">Content 1</div>
<div id="tab-2">Content 2</div>
</div>
</body>
The working solution I have is to create a second tab control inside
the content div with display:none, and then I've hooked up the click
handler on the header list items, but that means I'll have to handle
the selection code myself. It feels really hackish.
Is there a better way to handle this?
Thanks,
Douglas Mayle