如何检测#tabs-N是否被点击答案

【问题标题】：How to detect if #tabs-N is click如何检测#tabs-N是否被点击
【发布时间】：2014-09-18 01:33:57
【问题描述】：

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.
});

点击标签时我有这个代码。我的问题是我如何编写这样的代码来检查标签是否被点击？我有这个代码 sn-p 在我的。

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

谁能指出我的解决方案。我也计划拥有一个布尔变量可能会有所帮助，但我正在寻找 jquery 代码来解决这个问题（如果有的话）。

查看此FIDDLE 进行演示。

【问题讨论】：

我认为小提琴奏效了？
click 是一个事件而不是一个状态。您需要添加一个事件处理程序来确定它何时被点击。
@Mritunjay es 先生，它的工作原理，但如果点击 tab-N，我想添加一些逻辑条件。

标签： javascript jquery

【解决方案1】：

怎么样：

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

Check this solution.

【讨论】：

在这个 `ifselected="Tab 1 is selected"`` 我只能使用文本？如果我需要在单击选项卡时调用某些方法或函数怎么办？
if (ui.index == 2) { // 方法 }
其实这是一个很好的线程：Get Currently Selected Tab Index

【解决方案2】：

如果您需要从每个选项卡访问一些自定义数据，您只需添加一个属性并在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'));
        }
    });
});

这是一个 fiddle。

编辑：

调用函数：

$(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()]();
        }
    });
});

还有一个fiddle

【讨论】：

在这个`ifselected="Tab 1 is selected"``我只能使用文本？如果我需要在单击选项卡时调用某些方法或函数怎么办？
您想对它们都调用同一个方法，还是对每个都调用一个单独的方法？如果它们都是分开的，你可以把你的函数放在一个数组中，var tabfuncs = [function() {}, function() {}]，然后用tabfuncs[$(ui.newTab).index()]()调用它。

【解决方案3】：

我了解您想在单击选项卡后添加一些逻辑并希望对其执行一些逻辑然后首先您必须声明一个 全局字符串变量 而不是 保存 #tab 的 id 或标题的本地布尔变量，如下面的 sn-p

window.tabclicked = "";

然后您必须为变量分配单击选项卡的 id，如下所示

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

然后你可以为你的条件使用 switch 语句

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

【讨论】：