JQuery TabData: is it possible to get ClickedTab data and not index it?
I have a TabMenu project as shown below
<script type="text/javascript">
$(function() {
$('#container-1').tabs();
$('#container-2').tabs();
}
</script>
.....
<div id="container-1">
<ul>
<li><a href="#fragment-1"><span id="start">First</span></a></li>
</ul>
</div>
<div id="container-2">
<ul>
<li><a href="#fragment-1"><span id="end">Last</span></a></li>
</ul>
</div>
.....
Is it possible to get ClickedTab data instead of index? For example, if first ClickTab and then #fragment1
. If the last word ClickTab, #fragment2
.
How can i do this?
source to share
Can you clarify what you mean?
If you change this:
<li><a href="#fragment-1"><span id="end">Last</span></a></li>
in
<li><a href="#fragment-2"><span id="end">Last</span></a></li>
Then it will download # fragment-2 when you click on it.
If you really want to get the data on the "clicked" tab you can hook into the tabsselect event
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
//ui.panel is a dom element that contains the contents of the clicked tab.
}
Further reading is available on the JQuer UI docs
source to share
Hopefully this means you earned another part. Building on the previous example, this is possible:
$(document).ready(function() {
$('#container-1').tabs({
selected : function(e, ui) {
if ($($("a", e.target).get(ui.index)).attr('href') == '#fragment-1') {
alert('First clicked!');
}
}
});
});
....
<div id="container-1">
<ul>
<li><a href="#fragment-1"><span>Home</span></a></li>
<li><a href="#fragment-2"><span>Contact</span></a></li>
</ul>
</div>
Ultimately, it is probably better to use an index as you need to know a little bit of tab implementation details to do this, and you can use a radio button to handle the logic for each tab. However, if you think the content better suits your needs than that should work fine.
source to share