jquery使用data tab属性获取活动li tab的值或文本

我在获取 <li> 包含在 <ul> “阶级” tabs “

这是HTML结构。

<div class="modal_body">
    <div id="sub_container_div">
        <ul class="tabs" id="tabs_ul">
            <li class="tab-link current" data-tab="tab1li">Tab 1</li>
            <li class="tab-link" data-tab="tab2li">Tab 2</li>
            <li class="tab-link" data-tab="tab3li">Tab 3</li>
        </ul>
        <!------------------------------------------------------------------------------------------------->
        <!--TAB 1-->
        <div class="tab-content current" id="tab1div">TAB 1</div>
        <!------------------------------------------------------------------------------------------------->
        <!--TAB 2-->
        <div class="tab-content current" id="tab2div">TAB 2</div>
        <!------------------------------------------------------------------------------------------------->
        <!--TAB 3-->
        <div class="tab-content current" id="tab3div">TAB 3</div>

        <div class="modal_footer">
            <button  id="btn_save">Save</button>
        </div>
    </div>
</div>

我可以显示选项卡并切换到不同的选项卡。但是,我无法获取活动选项卡。我尝试了几种方法,我在这里的其他问题中发现 SO

在我的JS文件中,

$('#btn_save').on('click',function(event){
    event.preventDefault();
    var active = $('#tabs_ul li').attr('data-tab');
    //var active = $("#tabs_ul .ui-tabs-panel:visible").attr("id");
    alert(active);
});

这条线

var active = $('#tabs_ul li').attr('data-tab');
alert(active);

返回数据选项卡值。但是,当我切换到另一个选项卡并单击保存按钮时,它只返回相同的数据选项卡值,但不返回活动的值。

例如,如果我单击“tab 1”,它将返回“tab1li”,如果我单击“tab 2”,它仍返回“tab1li”,而不是“tab2li”

使用时 data-tab 属性,获取 数据选项卡 活动的值 tab?

谢谢您。