我知道如何使用jQuery选择/激活(通过编程)一个选项卡(如文档中提到):
$('ul.tabs').tabs('select_tab', 'tab_id');
但是,当我单击按钮时,如何使用JavaScript或jQuery在poletalizecss中获得一个活动(选定)选项卡的ID?
您可以使用活动类获取当前的活动选项卡。因此,可以获取当前选项卡的ID。以下是演示
$(document).ready(function(){
$('ul.tabs').tabs();
});
$('#getID').click(function(){
console.log("Active Tab:"+$(".active").attr('id'));
console.log("Active Tab Div:"+$(".active").attr('href'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#test1" id="1test">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test2" id="2test">Test 2</a></li>
<li class="tab col s3"><a href="#test4" id="4test">Test 4</a></li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
</div>
<button id="getID">
GetID
</button>
,尽管上述技术可能还可以,但有官方的方法可以在pertializecss中进行。
$('ul.tabs').tabs({
onShow: onShow,//Function to be called on tab Show event
swipeable: false,
responsiveThreshold: Infinity // breakpoint for swipeable
});
function onShow(tabOBJ){
console.log(tabOBJ.selector);
}
我希望这可以帮助您和其他人。
您可以使用jQuery。由于"活动"选项卡将具有active
类,您可以将其用于获取选项卡ID。
$(function(){
$('#submit').click(function(){
alert($(".active").attr('id'));
});
});
在这里工作的小提琴http://jsfiddle.net/utux2/
尝试此
$("ul.tabs > li > a").click(function (e) {
var id = $(e.target).attr("href").substr(1);
window.location.hash = id;});
var hash = window.location.hash;
$('ul.tabs').tabs('select_tab', hash);
首先制作哈希ID,然后将其放置到位tab_id