Skip to main content

Search and Top Navigation

#9284 closed bug (notabug)

Opened May 12, 2013 02:32PM UTC

Closed May 13, 2013 02:16AM UTC

Lack the option for specifying CSS selector of tab contents

Reported by: Ian Y. Owned by: Ian Y.
Priority: minor Milestone: none
Component: ui.tabs Version: 1.10.3
Keywords: Cc:
Blocked by: Blocking:
Description

The Tabs currently requires tab contents being at the same level as tablist:

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	<div id="tabs-1">
		(content)
	</div>
	<div id="tabs-2">
		(content)
	</div>
	<div id="tabs-3">
		(content)
	</div>
</div>

That doesn't work when tab contents aren't at the same level as tablist:

<section id="tabs">
	<header>
		<h2>Lorem Ipsum</h2>
		<nav>
			<h3>Table of Content</h3>
			<ul>
				<li><a href="#tabs-1">Nunc tincidunt</a></li>
				<li><a href="#tabs-2">Proin dolor</a></li>
				<li><a href="#tabs-3">Aenean lacinia</a></li>
			</ul>
		</nav>
	</header>
	<section id="tabs-1">
		(content)
	</section>
	<section id="tabs-2">
		(content)
	</section>
	<section id="tabs-3">
		(content)
	</section>
</section>
Attachments (0)
Change History (3)

Changed May 12, 2013 07:33PM UTC by tj.vantoll comment:1

owner: → Ian Y.
status: newpending

This seems to work fine: http://jsfiddle.net/tj_vantoll/bR82G/.

Could you please alter that test case to show the issue you're having?

Thanks.

Changed May 13, 2013 02:12AM UTC by Ian Y. comment:2

status: pendingnew

Thanks. I thought the selector must target on the tablist's parent element. It would be less confusing if the documentation explains which element the selector targets on.

Changed May 13, 2013 02:16AM UTC by tj.vantoll comment:3

resolution: → notabug
status: newclosed

Agreed. I created an issue to document the expected HTML structure for our API site: https://github.com/jquery/api.jqueryui.com/issues/133.