Question

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

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

当我在localhost上运行此测试时，URL中的#something部分是否应该像它应该的那样改变（就像默认情况下网址的结尾一样） #scroll-tab-1，但是当我点击标题为BOB的标签时，会显示该网址更改以#scroll-tab-2结束，但粉红色的重音是没有添加到新点击的标题标题。
有靛蓝色的空行（即空的水平空间）嵌套标签下方。为什么？我需要摆脱这个。

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

＆＃13;

<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>

＆＃13;

Answer 1

回答你的第二点 - ＆＃34;靛蓝色的空行＆＃34;。

您忘记添加＆＃39; mdl-layout__tab-bar-container＆＃39; class作为＆＃34; mdl-layout__tab-panel＆＃34;的父级。

Check my jsFiddle

$('.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');
});

关于您的第一点： 我认为MDL团队没有处理嵌套选项卡。单击嵌套选项卡时，会出现错误：

未捕获的TypeError：无法读取属性＆＃39; classList＆＃39;为null

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

style="float:left; width:300px;height:500px;"

jsFiddle Demo（在此我可以使嵌套的MDL标签处于活动状态）

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

1 个答案: