我在获取类“ <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
值的正确方法?
谢谢。
答案 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');