javascript - 在实现 css 中获取事件选项卡的 id

Question

我知道如何使用 jquery(如文档中所述)选择/激活(以编程方式)materializecss 中的选项卡:

$('ul.tabs').tabs('select_tab', 'tab_id');

但是，当我单击按钮时，如何使用 javascript 或 jquery 获取 materializecss 中事件(选定)选项卡的 id？

Answer 1

您可以使用 active 类来获取当前事件的选项卡。因此可以获得当前选项卡的 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>