Question

我在获取类“ <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 值的正确方法？

谢谢。

Answer 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');

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

1 个答案: