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

Question

JSFiddle here.

我正在尝试在使用Material Design Lite的网页中使用嵌套选项卡。因此，请在链接的JSFiddle或下面的演示中看到，如果您单击标有ONE的外部选项卡，您将看到4个嵌套选项卡。问题出在以下嵌套选项卡上：

1. 默认情况下，这些嵌套选项卡中的第一个处于活动状态，因此其 选项卡标题/标题下方有一个粉红色的重音。当我点击 在其他嵌套选项卡上，应删除此粉红色重音符号 从第一个嵌套选项卡，并应添加到单击的选项卡中。 但这不会发生。

   当我在本地主机上运行此测试时，URL 中的#something部分 确实像它应该的那样更改(例如默认情况下 url 以#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"中。

检查我的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 的属性"类列表">

处理嵌套选项卡的更好方法应该是：当您单击选项卡时，只需检查父类"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 演示(在此我能够激活嵌套的 MDL 选项卡)