How to detect if #tabs-N is click

Question

var isClicked = false;
$("a[href='#tabs-1']").off("click").on("click",function(){
    alert("tab 1 is click");    
    isClicked = true; // dont want to use like this.
});

I have this code when tab is click. My problem is how can i code like this to check tab is clicked? i have this code snippet in mine.

if(#tabs-1' is clicked){ // do this}

Can someone point me out for solution. Also i do plan that having a boolean variable might help but im looking for jquery code to solve this(if there is).

see this FIDDLE for demo.

`click` is an event not a state. You need to add an event handler to determine when it has been clicked. — codemonkeh, Sep 18 '14 at 01:41
@Mritunjay es sir, its working, but i want to add some logic conditioning if the tab-N is clicked. — bumbumpaw, Sep 18 '14 at 01:55

score 1 · Answer 1 · edited Sep 18 '14 at 02:07

1

How about:

$('#tabs').tabs({
    select: function(event, ui) {
                console.log($(ui.tab)); // the tab selected
                alert(ui.index);
            }
});

Check this solution.

edited Sep 18 '14 at 02:07

James G.

2,852
3
28
52

answered Sep 18 '14 at 01:48

carlodurso

2,886
4
24
37

In this `ifselected="Tab 1 is selected"`` i can only used text? what if i needed to call some method or function when tab is click? – bumbumpaw Sep 18 '14 at 02:57
1

if (ui.index == 2) { // method } – carlodurso Sep 18 '14 at 03:02
1

Actually this is an excellent thread: [Get Currently Selected Tab Index](http://stackoverflow.com/questions/300078/jquery-ui-tabs-get-currently-selected-tab-index) – carlodurso Sep 18 '14 at 03:12

score 1 · Answer 2 · 2014-09-18T04:44:34.557

If there is some custom data you need to access from each tab, you could just add an attribute and get it on activate:

HTML:

<div id="tabs">
    <ul>
        <li ifselected="Tab 1 is selected"><a href="#tabs-1">Nunc tincidunt</a></li>
        <li ifselected="Tab 2 is selected"><a href="#tabs-2">Proin dolor</a></li>
        <li ifselected="Tab 3 is selected"><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
<!-- ... -->

Javascript:

$(function() {
    $('#tabs').tabs({
        activate: function(event, ui) {
            alert($(ui.newTab).attr('ifselected'));
        }
    });
});

Here is a fiddle.

EDIT:

Calling functions:

$(function() {
    var tabfuncs = [
        () => alert("Tab 1 is selected"),
        () => alert("Tab 2 is selected"),
        () => alert("Tab 3 is selected")
    ];
    $('#tabs').tabs({
        activate: function(event, ui) {
            tabfuncs[$(ui.newTab).index()]();
        }
    });
});

And another fiddle

In this `ifselected="Tab 1 is selected"`` i can only used text? what if i needed to call some method or function when tab is click? — bumbumpaw, Sep 18 '14 at 04:40
Do you want to call the same method all of them, or have a separate method for each? If they are all separate, you could put your functions in an array, `var tabfuncs = [function() {}, function() {}]`, and call it with `tabfuncs[$(ui.newTab).index()]()`. — , Sep 18 '14 at 04:40

score 0 · Answer 3 · answered Sep 18 '14 at 05:41

how far i understand you want to put some logic after the tab is clicked and want to execute some logic over that then first of all you have to declare a global string variable instead of local Boolean variable that hold the id or title of the #tab like the below snippet

window.tabclicked = "";

then you have to assign the variable the id of the clicked tab like the following

 $(function () {
            $("#tabs").tabs();
            $("a[href='#tabs-1']").off("click").on("click", function () {
                tabclicked = $(this).prop('href');
            });
        });

then you can use a switch statement for you condition

switch (tabclicked)
        {
            case "#tab1":
                {
                    // your logic here
                    break;
                }
            default:
                break;
        }

How to detect if #tabs-N is click

3 Answers3