jquery - 如果我从 HTML、jquery 中的指定选项卡单击另一个选项卡，如何“捕捉”？

Question

我的 HTML 代码：

<div id="tabsWithStyle">
    <ul>
        <li><a href="#data1">Data 1 TAB</a></li>
        <li><a href="#data2">Data 2 TAB</a></li>
        <li><a href="#data3">Data 3 TAB</a></li>
    </ul>
</div>
<div id="data1">
    <jsp:include page="./data1.jsp" flush="false"></jsp:include>
</div>
<div id="data2">
    <jsp:include page="./data2.jsp" flush="false"></jsp:include>
</div>
<div id="data3">
    <jsp:include page="./data3.jsp" flush="false"></jsp:include>
</div>

我的 JQUERY 代码，它可以告诉我已选择/单击的 TAB 的编号：

$('#tabsWithStyle').tabs({
    activate: function( event, ui ) {
        var activeTabNumber = $( "#tabsWithStyle" ).tabs( "option", "active" );
        alert("number of selected tab link: "+activeTabNumber);
    }
});

我想知道，如果我在 data2 链接上，然后我点击另一个链接。我怎么能“抓住”它？我希望我能很好地表达自己。谢谢！

Answer 1

演示

HTML

<div class="tab">
    <ul>
        <li class="selected" data-value="first">testing</li>
        <li data-value="second"><a>testing1</a></li>
        <li data-value="third"><a>testing2</a></li>
    </ul>
</div>
<div class="content">
    <div id="first">first</div>
    <div id="second">Second</div>
    <div id="third">Second</div>
</div>

脚本

$.fn.GTtab = function() {
    this.find('li').css('cursor','pointer');                        
    var show=this.find('li.selected').attr('data-value');
    $('#'+show).show().siblings().hide();
    this.find('li').on('click',function(){
       show=$(this).attr('data-value');        
       $('#'+show).show().siblings().hide();
    });

};
$( ".tab" ).GTtab();

Answer 2

如果我正确理解您的问题，事件处理程序的ui参数activate包含您需要的一切：

http://api.jqueryui.com/tabs/#event-activate

• newTab：刚刚激活的选项卡。
• oldTab：刚刚停用的选项卡。
• newPanel：刚刚激活的面板。
• oldPanel：刚刚停用的面板。