Jquery accessor id vs class?
at this link: http://jqueryui.com/demos/tabs/ , when we look at the "view source", we have:
<div id="tabs">
<ul>
<li><a href="#tabs-1">...</a></li>
<li><a href="#tabs-2">...</a></li>
<li><a href="#tabs-3">...</a></li>
</ul>
<div id="tabs-1">...</div>
<div id="tabs-2">...</div>
<div id="tabs-3">...</div>
</div>
so I want to know how to implement this with a class instead of id,
given that this part of the code will be used several times, which can be loaded by ajax,
at different times.
for adding tabs dynamically, there is an add method that will automatically show you the tab controls, which allows you to reuse the tab creation code again.
When a tab is added to the page, it fires an add event, as shown on the doc tab page:
var $tabs = $('#example').tabs({
add: function(event, ui) {
$tabs.tabs('select', '#' + ui.panel.id);
}
});
jQuery ui div, . , , html .
.
<script>
$(function() {
$( "#tabs" ).tabs();
$( "#tabs2" ).tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">...</a></li>
<li><a href="#tabs-2">...</a></li>
<li><a href="#tabs-3">...</a></li>
</ul>
<div id="tabs-1">...</div>
<div id="tabs-2">...</div>
<div id="tabs-3">...</div>
</div>
<div id="tabs2">
<ul>
<li><a href="#tabs2-1">...</a></li>
<li><a href="#tabs2-2">...</a></li>
<li><a href="#tabs2-3">...</a></li>
</ul>
<div id="tabs2-1">...</div>
<div id="tabs2-2">...</div>
<div id="tabs2-3">...</div>
</div>
, , jquery ui, .
div jqueryui, .
The link href attribute in the tab itself is encoded to search for specific div content. therefore href = "# tab-1" will always show a div with the id "# tab-1".
Here's how it works. If you want to use the class instead, you need to change / extend the functionality of the jquery ui tab in the jqueryui library. Or you can write your own jQuery tab plugin.