jQuery使用data-tab属性获取活动li选项卡的值或文本

时间:2019-01-06 07:32:22

标签: javascript jquery

我在获取类“ <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属性时,如何获取活动页面的data-tab 的正确方法?

谢谢。

1 个答案:

答案 0 :(得分:1)

通过这种方式$('#tabs_ul li').attr('data-tab');,您将始终获得li ID的第一个tabs_ul子代,这就是为什么您总是看到第一个ID的原因。

您也需要获得current类的人。

$('#tabs_ul li.current').attr('data-tab');

这意味着您必须管理current类(如果尚未使用您所使用的类实现)。

然后在jQuery中,您可以直接通过data()方法获取数据属性:

$('#tabs_ul li.current').data('tab');