jquery UI Tabs using DIV instead of UL for navigation

Question

Hi Im a little new to JS and this has got me scratching my head like crazy.

I want to use a DIV with a bunch of anchors inside for the navigation instead of the mandatory (I think?) UL.

I have found the piece of code that does this, but I can't seem to make any sense of it.

 this.list = this.element.children('ul:first');
 this.lis = $('li:has(a[href])', this.list);
 this.anchors = this.lis.map(function() { return $('a', this)[0]; });
 this.panels = $([]);

Now, changing the

ul:first

to

div:first

works, but I still have to wrap all my A's in a LI. This must be happening in the second line, but I really can't figure out what to do with it.

I know this is a small bite of a rather large script, but I hope it will do. All the code is available at ui.jquery.com (as you most likely already know) and I can post the rest of it if needed.

Many thanks in advance for your help.

The goal is to replace the UL and LI's with a single DIV that contains nothing but A's This will make styling so much easier.

Answer 1

this.list = this.element.children('div');
this.lis = $('a[href]', this.list);
this.anchors = $('a[href]', this.list);
this.panels = $([]);

Try this.

And I said that a little to soon, but it was easy to fix. Just adding it here for anyone else that might be looking for it. Chacha's solution works, but the tabs wont be assigned the proper classes when they are selected. This is fixed by removing .closest('li') from lines 273 and 281 in ui.tabs.js This will fix it nicely and you can use the classes as you would normally. – Mathias Nielsen 12 mins ago