Material Design Lite中的嵌套选项卡-嵌套选项卡不能完全响应单击事件吗?

问题描述：

我正在尝试在使用材料设计的网页中使用嵌套标签精简版.因此，请在链接的JSFiddle或下面的演示中查看，如果单击标记为ONE的外部标签，则会看到4个嵌套标签.问题在于这些嵌套的标签页:

I am trying to use Nested Tabs in a web page where I am using Material Design Lite. So, please see in the JSFiddle linked or in the demo below, if you click the outer tab labelled ONE, you will see 4 nested tabs. The problem is with these nested tabs:

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

The first of these nested tabs is Active by default, so its tab-header/title has a pink colored accent under it. When I click on the other nested tabs, this pink colored accent should be removed from the first nested tab and should be added to the tab clicked. But that does NOT happen.

当我在本地主机上运行此测试时，URL中的#something部分是否会发生应有的变化(例如，默认情况下，网址以 #scroll-tab-1，但是当我单击标题为BOB的标签时，URL 更改为以#scroll-tab-2结尾)，但粉红色的重音为没有添加到新单击的标签标题中.

When I run this test on localhost, the #something part in the URL DOES change like it should (like by default the url ends with #scroll-tab-1, but when I click the tab titled BOB, the URL changes to end with #scroll-tab-2), BUT the pink colored accent is not added to the newly clicked tab title.

有Indigo彩色的空行(即水平空间为空) 在嵌套标签下.为什么?我需要摆脱它.

There is Indigo colored empty row (i.e. empty horizontal space) below the nested tabs. Why? I need to get rid of this.

那么我该如何解决这些问题，尤其是第一个问题?预先谢谢你.

So how do I solve these problems, especially the first one? Thank you in advance.

<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 to your 2nd point - "Indigo colored empty row".

您忘记将"mdl-layout__tab-bar-container"类作为父类添加到"mdl-layout__tab-panel"中.

You forgot to add 'mdl-layout__tab-bar-container' class as a parent to the "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团队没有处理嵌套选项卡.当您点击嵌套标签时，您会收到错误消息:

About your first point: I think MDL team didn't handled the nested tab. When you click on nested tab, you get an error:

未捕获的TypeError:无法读取null的属性"classList"

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

The better approach to handle nested tabs should be: When you click on tab just check parent class 'mdl-layout__tab-bar-container', then make tab and content active under this parent:

$('.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选项卡处于活动状态)

jsFiddle Demo (In this I am able to make nested MDL tab active)

Material Design Lite中的嵌套选项卡-嵌套选项卡不能完全响应单击事件吗?

相关推荐