Opened 11 years ago

Closed 11 years ago

Last modified 7 years ago

#4277 closed enhancement (fixed)

Tabs tabify's all LIs including those in panels

Reported by: deburca Owned by:
Priority: minor Milestone:
Component: ui.tabs Version: 1.6rc6
Keywords: Cc:
Blocked by: Blocking:

Description

With the following HTML

<div class="container">
  <ul>
    <li><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
  </ul>
  <div class="tab1">
    <ul>
      <li><a href="page1.htm">List item 1.1</a></li>
      <li><a href="page2.htm">List item 1.2</a></li>
    </ul>
  </div>
  <div class="tab2">
    <ul>
      <li><a href="page3.htm">List item 2.1</a></li>
      <li><a href="page4.htm">List item 2.2</a></li>
    </ul>
  </div>
</div>

a $('.container').tabs() will tabify all LIs, including those for list items 1.1, 1.2, 2.1 and 2.2. These later list items load page1.htm, page2.htm, page3.htm and page4.htm respectively via AJAX when clicked.

A solution is to narrow the tabify by specifying the first UL within the DIV container.

Updating the JS from

tabify: function(init) {
  this.$lis = $('li:has(a[href])', this.element);

to

tabify: function(init) {
  this.$lis = $('ul:first li:has(a[href])', this.element);

solves this issue.

The scope for the tabs could be kept as a config option - defaulting to 'UL', but allowing users to override with 'UL:first' or any other selector.

Change History (2)

comment:1 Changed 11 years ago by klaus.hartl

Resolution: fixed
Status: newclosed

fixed already in a later revision

comment:2 Changed 7 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.