Opened 6 years ago

Closed 6 years ago

#9284 closed bug (notabug)

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>

Change History (3)

comment:1 Changed 6 years ago by tj.vantoll

Owner: set to 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.

comment:2 Changed 6 years ago by Ian Y.

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.

comment:3 Changed 6 years ago by tj.vantoll

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.

Note: See TracTickets for help on using tickets.