jquery - 选择某个选项卡时隐藏asp.net按钮jquery

Question

我有一个带有选项卡设置和一个 asp 按钮的页面。

<div id="tabs" style="width:700; height:1000">
    <ul>
    <li><a href="#tabs-1">Referral</a></li>
    <li><a href="#tabs-2">Details</a></li>
    <li><a href="#tabs-3">Other</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
    <asp:Button ID="btnMainSave" runat="server" Text="Save" />    
</div>

选择TABS-3时，我希望该按钮是不可见的，但对于前两个选项卡。记住我是初学者，如何使用 jquery 来实现这一点。我已经尝试了以下代码，但没有奏效。

<script type="text/javascript" >
$(function () {
    $('#tabs, #tabs-3').tabs({
        active: function (event, ui) {
            $("#btnMainSave").hide();
        }
    });
});
</script>

任何帮助，将不胜感激。谢谢

抢

Answer 1

您需要使用activate事件（不是active选项）：

$(function () {
    $('#tabs, #tabs-3').tabs({
        activate: function (event, ui) {
            $("#btnMainSave").hide();
        }
    });
});

编辑

您必须添加一些逻辑来检查哪个面板被激活，并button基于此隐藏。我不知道您使用的是哪个版本的 jQuery UI，但以下内容可以在最新版本中使用：

activate: function(e, ui) {
  $('#btnMainSave').toggle( !$(ui.newPanel).is('#tabs-3') );
}

这是一个小提琴

Answer 2

试试这个：演示

$("#tabs").tabs();
$(".nexttab").click(function() {
    var selected = $("#tabs").tabs("option", "selected");
    $("#tabs").tabs("option", "selected", selected + 1);
});