, $ul = $(e.liveFired)
, $controlled
- if (/^#/.test(href)) {
+ if (/^#\w+/.test(href)) {
e.preventDefault()
if ($this.hasClass('active')) {
return
}
- $controlled = $('#' + $ul.attr('aria-controls'))
+ $href = $(href)
activate($this.parent('li'), $ul)
- activate($(href, $controlled), $controlled)
+ activate($href, $href.parent())
}
}
$.fn.tabs = $.fn.pills = function () {
return this.each(function () {
- $(this).delegate('.tabs > li > a, .pills > li > a', 'click', tab)
+ $(this).delegate('.tabs > li > a, .pills > li > a, .dropdown-menu > li > a', 'click', tab)
})
}
<!-- sample modal content -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
- <h3>Modal Heading</h3>
<a href="#" class="close">×</a>
+ <h3>Modal Heading</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
<h3>Method</h3>
<h4>$().tabs or $().pills</h4>
<p>
- Activates tab and pill functionality for a given container.
+ Activates tab and pill functionality for a given container. Tab links should reference id's in the document.
</p>
- <p>
- <strong>Note:</strong> The controlled container is defined by a required <code>aria-controls</code> attribute added to your <code>.tabs</code> or <code>.pills</code>. The <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls">aria-controls</a> attribute must reference an element's id.
<pre class="prettyprint linenums">
-<ul class="tabs" aria-controls="my-pill-content">
+<ul class="tabs">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
<li><a href="#settings">Settings</a></li>
</ul>
-<div class="pill-content" id="my-pill-content">
+<div class="pill-content">
<div class="active" id="home">...</div>
<div id="profile">...</div>
<div id="messages">...</div>