How to find out the TabSelection
I have the following code for developing tabs.
$(document).ready(function() {
$('#container-1').tabs();
}
....
<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>
...
All perfectly! I need a tab click event. If it's the Home tab, I have to do alert();
. How do you achieve this?
0
source to share
3 answers
Personally, I will handle all of this in the tab configuration itself, rather than adding click events to the elements that will eventually become the clickable part of the tab. If you do this via tab config, then all your tab logic is centralized, which makes things cleaner and you don't need to be familiar with the implementation details of tabs:
$(document).ready(function() {
$('#container-1').tabs({
selected : function(e, ui) {
if (ui.index == 0) {
alert('Home 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>
+1
source to share
If you wanted a tab click event, you would do something like one of the following.
$("#tabid").click(function(e) {
e.preventDefault();
// Do tab click logic
});
or
$(".tabclass").click(function(e) {
e.preventDefault();
// Do tab click logic
});
Do a jQuery cheat sheet search to get a very useful jQuery cheat sheet.
0
source to share