Material Design Lite 中的嵌套选项卡 - 嵌套选项卡不完全响应点击事件？

Question

JSFiddle here.

我正在尝试在使用Material Design Lite 的网页中使用嵌套选项卡。因此，请在链接的 JSFiddle 或下面的演示中查看，如果单击标记为 ONE 的 outer 选项卡，您将看到 4 个 嵌套 选项卡。问题在于这些嵌套选项卡：

1. 这些嵌套选项卡中的第一个默认情况下是活动的，因此它的 tab-header/title 下面有一个粉红色的 accent。当我点击 在其他嵌套选项卡上，应该删除这个粉红色的口音 从第一个嵌套选项卡开始，应该添加到单击的选项卡中。 但这不会发生。

   当我在 localhost 上运行此测试时，URL 中的 #something 部分 确实会发生应有的变化（默认情况下，网址以 #scroll-tab-1，但是当我单击标题为 BOB 的选项卡时，URL 更改为以#scroll-tab-2) 结尾，但粉红色的口音是 没有添加到新点击的标签标题中。

2. 有靛蓝色空行（即空的水平空间） 在嵌套选项卡下方。为什么？我需要摆脱它。

那么我该如何解决这些问题，尤其是第一个问题？提前谢谢你。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
	<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
	
<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">All</a>
		<a href="#fixed-tab-2" class="mdl-layout__tab">ONE</a>
		<a href="#fixed-tab-3" class="mdl-layout__tab">TWO</a>
		<a href="#fixed-tab-4" class="mdl-layout__tab">THREE</a>
	</div>

</header>

<div class="mdl-layout__drawer">
	<span class="mdl-layout-title">Title</span>
</div>

<main class="mdl-layout__content">

    <section class="mdl-layout__tab-panel is-active" id="fixed-tab-1">
    	<div class="page-content"><!-- Your content goes here --></div>
    </section>

    
    <section class="mdl-layout__tab-panel" id="fixed-tab-2">
    	<div class="page-content">
      		<!-- Your content goes here -->
      		<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
      			<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Alice</a>
      			<a href="#scroll-tab-2" class="mdl-layout__tab">Bob</a>
      			<a href="#scroll-tab-3" class="mdl-layout__tab">Amy</a>
      			<a href="#scroll-tab-4" class="mdl-layout__tab">Sarah</a>
      		</div>
      	</div>
    </section>

    <section class="mdl-layout__tab-panel" id="fixed-tab-3">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>

    <section class="mdl-layout__tab-panel" id="fixed-tab-4">
      <div class="page-content"><!-- Your content goes here --></div>
    </section>
</main>

</div>

Answer 1

回答你的第二点 - “靛蓝色空行”。

您忘记将“mdl-layout__tab-bar-container”类作为父类添加到“mdl-layout__tab-panel”。

Check my jsFiddle

<div class="mdl-layout__tab-bar-container">
    <section class="mdl-layout__tab-panel" id="fixed-tab-2">
       <div class="page-content">
          <!-- Your content goes here -->
          <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
              <a href="#scroll-tab-1" class="mdl-layout__tab is-active">Alice</a>
              <a href="#scroll-tab-2" class="mdl-layout__tab">Bob</a>
              <a href="#scroll-tab-3" class="mdl-layout__tab">Amy</a>
              <a href="#scroll-tab-4" class="mdl-layout__tab">Sarah</a>
          </div>
       </div>
    </section>
</div>

关于您的第一点： 我认为 MDL 团队没有处理嵌套选项卡。当你点击嵌套标签时，你会得到一个错误：

未捕获的类型错误：无法读取 null 的属性“classList”

处理嵌套选项卡的更好方法应该是：当您单击选项卡时，只需检查父类 'mdl-layout__tab-bar-container'，然后在该父级下激活选项卡和内容：

$('.mdl-layout__tab').on('click', function() {
   $this = $(this);
   if($this.hasClass('is-active')) return;

   $parent = $this.closest('.mdl-layout__tab-bar');
   $('.mdl-layout__tab', $parent).removeClass('is-active');
   $this.addClass('is-active');
});

jsFiddle Demo（在此我可以激活嵌套的 MDL 选项卡）