11

レイアウト コンポーネント ページの mdl タブバーを使用しています。

  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Title</span>
    </div>
    <!-- Tabs -->
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
      <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
      <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
    </div>
  </header>

タブ/パネルの両方で「is-active」クラスを追加/削除する必要がありますか、またはプログラムでタブを選択する簡単な方法はありますか?

4

8 に答える 8

9

DOM 要素で Click() メソッドを使用して、Click イベントをシミュレートできます。

document.getElementById("AnchorTagId").click()

于 2015-12-11T10:04:51.147 に答える
6

jqueryでタブボタンのクリックをシミュレートできます

ex (プログラムで 2 番目のタブをアクティブにする - インデックス 1):

$(".mdl-layout__tab:eq(1) span").click ();

ex (プログラムで最初のタブをアクティブにする - インデックス 0):

$(".mdl-layout__tab:eq(0) span").click ();
于 2015-09-23T01:22:50.487 に答える
1

mdl (@version v1.2.1) を使用

jQuery でクリックイベントをシミュレートできます：

$(".mdl-tabs__tab:eq(0) span").click (); //for the first tab (index 0)
$(".mdl-tabs__tab:eq(1) span").click (); //for the second tab (index 1)

...

Firefox 50.0 - 50.0.2 および Microsoft Edge 38.14393.0.0 でテスト済み

于 2016-12-06T06:23:15.790 に答える