Lack the option for specifying CSS selector of tab contents

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>