不显示通过单击侧抽屉中的 link 显示的 <section> 中第一个选项卡的内容。为什么？
The content of first Tab in a <section> displayed by clicking a link in side-drawer is NOT displayed. Why?
在这个 MCVC 中，我有一个侧边抽屉（通过单击左上角的按钮打开），其中有三个 link 标记为 Link One、Link Two 和 Link Three.这些 link 中的每一个都有一个 href，其值等于 # 与 [=21= 的 id 串联] 这个link对应。
在CSS中，与这些link对应的所有三个<section>得到一个display:none，除了第一个一个得到 display:block.
我为这些 link 编写了一个 JS 点击处理程序。这个函数的作用是隐藏（JQuery hide()）当前显示的<section>和显示 (JQuery show())点击link对应的<section>。
问题：
当我点击侧边抽屉中的 link 时，对应的 <section> 会得到 display:block;（我在浏览器的检查器中检查过）。到目前为止一切顺利。
但是
问题是当我点击侧面抽屉link中的link时，新显示的<section>中第一个选项卡的内容是不显示。而是显示白色空白 space。
我哪里错了？我错过了什么？
$(".mdl-navigation__link").click(function() {
var idOfSectionToShow = $(this).attr("href");
//alert(idOfSectionToShow);//check
$(".mdl-tabs").each(function() {
if ( $(this).css("display") != "none" ) {
//alert($(this).attr("class"));//check
$(this).hide();
}
});
//alert( typeof $(idOfSectionToShow) );
//alert( "idOfSectionToShow: " + $(idOfSectionToShow).attr("id") );
$(idOfSectionToShow).show();
});
.mdl-tabs__tab-bar {
background-color: rgb(63,81,181);
padding: 0 0 1px 56px;
justify-content: flex-start !important;
}
.tabs-bar {
height: initial;
overflow-x: auto;
}
.mdl-tabs {
display:none;
}
.tabs-container1 {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" />
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<div class="mdl-layout-spacer"></div>
<button
class="mdl-button mdl-js-button mdl-button--icon open-modal-button">
<!-- <i class="material-icons">view_module</i>-->
</button>
<!-- Add button here -->
</div>
<!-- Bottom row, not visible on scroll -->
<div class="mdl-layout__header-row">
<div class="story-summary">
<h4>Story One</h4>
<p>Story story story story story story story story story story story story story story story story.</p>
</div>
</div>
<!-- .mdl-layout__header-row -->
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link navLink1" href="#tabs-container1">Link One</a>
<a class="mdl-navigation__link navLink2" href="#tabs-container2">Link Two</a>
<a class="mdl-navigation__link navLink3" href="#tabs-container3">Link Three</a>
</nav>
</div>
<main class="mdl-layout__content">
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<section id="tabs-container1" class="mdl-tabs mdl-js-tabs tabs-container1">
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-left-button"><i class="material-icons">chevron_left</i></div>
<div class="mdl-tabs__tab-bar tabs-bar">
<a href="#alpha" class="mdl-tabs__tab is-active" style="color:white;" >Alpha</a>
<a href="#beta" class="mdl-tabs__tab" style="color:white;" >Beta</a>
<a href="#gamma" class="mdl-tabs__tab" style="color:white;" >Gamma</a>
</div>
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-right-button"><i class="material-icons">chevron_right</i></div>
<section id="alpha" class="mdl-tabs__panel is-active" style="background-color:pink;" >
What is Lorem Ipsum?
em Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors nefore always free from repetition, injected humour, or non-characteristic words etc.
</section>
<section id="beta" class="mdl-tabs__panel" style="background-color:wheat;" >terdum ex, id feugiat libero orci ornare mauris. Nulla et est porttitor, facilisis nibh at, blandit velit. Mauris aliquet orci eu ante mollis auctor. Vivamus tristique vitae sem sit amet dictum. Nulla sit amet feugiat nibh. Fusce interdum felis in ex interdum, id eleifend lectus sodales. Praesent ultrices tincidunt magna nec cursus. Vivamus turpis ligula, luctus eget semper sed, gravida eget felis.
nean mauris urna, sagittis in urna sed, condimentum pretium arcu.
</section>
<section id="gamma" class="mdl-tabs__panel" style="background-color:grey;" >
(de Finibus Bonorum et Malorum) للمفكر شيشيرون (Cicero) والذي كتبه في عام 45 قبل الميلاد. هذا الكتاب هو بمثابة مقالة علمية مطولة في نظرية الأخلاق، وكان له شعبية كبيرة في عصر النهضة. السطر الأول من لوريم إيبسوم "Lorem ipsum dolor sit amet.." يأتي من سطر في القسم 1.20.32 من هذا الكتاب.
للمهتمين قمنا بوضع نص لوريم إبسوم القياسي والمُستخدم منذ القرن الخامس عشر في الأسفل. وتم أيضاً توفير الأقسام 1.10.32 و 1.10.33 من "حول أقاصي الخير والشر" (de Finibus Bonorum et Malorum) لمؤلفه شيشيرون (Cicero) بصيغها الأصلية، مرفقة بالنسخ الإنكليزية لها والتي قام بترجمتها هـ
</section>
</section><!-- .mdl-tabs.mdl-js-tabs -->
-------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<section id="tabs-container2" class="mdl-tabs mdl-js-tabs tabs-container2">
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-left-button"><i class="material-icons">chevron_left</i></div>
<div class="mdl-tabs__tab-bar tabs-bar">
<a href="#delta" class="mdl-tabs__tab is-active" style="color:white;" >Alpha</a>
<a href="#zelda" class="mdl-tabs__tab" style="color:white;" >Beta</a>
</div>
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-right-button"><i class="material-icons">chevron_right</i></div>
<section id="delta" class="mdl-tabs__panel" style="background-color:green;" >
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac diam sem. Maecenas congue leo e
</section>
<section id="zelda" class="mdl-tabs__panel" style="background-color:yellow;" >
للمهتمين قمنا بوضع نص لوريم إبسوم القياسي والمُستخدم منذ القرن الخامس عشر في الأسفل. وتم أيضاً توفير الأقسام 1.10.32 و 1.10.33 من "حول أقاصي الخير والشر" (de Finibus Bonorum et Malorum) لمؤلفه شيشيرون (Cicero) بصيغها الأصلية، مرفقة بالنسخ الإنكليزية لها والتي قام بترجمتها هـ
</section>
</section> <!-- .mdl-tabs.mdl-js-tabs -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<section id="tabs-container3" class="mdl-tabs mdl-js-tabs tabs-container3">
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-left-button"><i class="material-icons">chevron_left</i></div>
<div class="mdl-tabs__tab-bar tabs-bar">
<a href="#maroon" class="mdl-tabs__tab is-active" style="color:white;" >Alpha</a>
<a href="#orange" class="mdl-tabs__tab" style="color:white;" >Beta</a>
</div>
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-right-button"><i class="material-icons">chevron_right</i></div>
<section id="maroon" class="mdl-tabs__panel" style="background-color:maroon;" >
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac diam sem. Maecenas congue leo eu suscipit mollis. Nunc efficitur phar
</section>
<section id="orange" class="mdl-tabs__panel" style="background-color:orange;" >
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac diam sem. Maecenas congue leo eu suscipit mollis. Nunc efficitur pharetra magna, eu rutrum est. Duis quis diam sed neque accumsan condimentum sit amet non felis. Integer efficitur porta nisi non tristique. Cras efficitur massa metus, in scelerisque elit dictum ac. Nulla viverra, ligula non vestibulum tincidunt, turpis erat interdum ex, id feugiat libero orci ornare mauris. Nulla et est porttitor,
</section>
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
</main>
</div>
您希望在单击菜单项时显示的其他部分缺少 class。
检查这两个部分
<section id="delta" class="mdl-tabs__panel is-active" style="background-color:green;" >
和
<section id="maroon" class="mdl-tabs__panel is-active" style="background-color:maroon;" >
注意它现在有 class mdl-tabs__panel 和 is-active.
在您的 jsfiddle 中，您缺少这两个部分的 is-active class。
在这个 MCVC 中，我有一个侧边抽屉（通过单击左上角的按钮打开），其中有三个 link 标记为 Link One、Link Two 和 Link Three.这些 link 中的每一个都有一个 href，其值等于 # 与 [=21= 的 id 串联] 这个link对应。
在CSS中，与这些link对应的所有三个<section>得到一个display:none，除了第一个一个得到 display:block.
我为这些 link 编写了一个 JS 点击处理程序。这个函数的作用是隐藏（JQuery hide()）当前显示的<section>和显示 (JQuery show())点击link对应的<section>。
问题：
当我点击侧边抽屉中的 link 时，对应的 <section> 会得到 display:block;（我在浏览器的检查器中检查过）。到目前为止一切顺利。
但是
问题是当我点击侧面抽屉link中的link时，新显示的<section>中第一个选项卡的内容是不显示。而是显示白色空白 space。
我哪里错了？我错过了什么？
$(".mdl-navigation__link").click(function() {
var idOfSectionToShow = $(this).attr("href");
//alert(idOfSectionToShow);//check
$(".mdl-tabs").each(function() {
if ( $(this).css("display") != "none" ) {
//alert($(this).attr("class"));//check
$(this).hide();
}
});
//alert( typeof $(idOfSectionToShow) );
//alert( "idOfSectionToShow: " + $(idOfSectionToShow).attr("id") );
$(idOfSectionToShow).show();
});
.mdl-tabs__tab-bar {
background-color: rgb(63,81,181);
padding: 0 0 1px 56px;
justify-content: flex-start !important;
}
.tabs-bar {
height: initial;
overflow-x: auto;
}
.mdl-tabs {
display:none;
}
.tabs-container1 {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" />
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<!-- Top row, always visible -->
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<div class="mdl-layout-spacer"></div>
<button
class="mdl-button mdl-js-button mdl-button--icon open-modal-button">
<!-- <i class="material-icons">view_module</i>-->
</button>
<!-- Add button here -->
</div>
<!-- Bottom row, not visible on scroll -->
<div class="mdl-layout__header-row">
<div class="story-summary">
<h4>Story One</h4>
<p>Story story story story story story story story story story story story story story story story.</p>
</div>
</div>
<!-- .mdl-layout__header-row -->
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link navLink1" href="#tabs-container1">Link One</a>
<a class="mdl-navigation__link navLink2" href="#tabs-container2">Link Two</a>
<a class="mdl-navigation__link navLink3" href="#tabs-container3">Link Three</a>
</nav>
</div>
<main class="mdl-layout__content">
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<section id="tabs-container1" class="mdl-tabs mdl-js-tabs tabs-container1">
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-left-button"><i class="material-icons">chevron_left</i></div>
<div class="mdl-tabs__tab-bar tabs-bar">
<a href="#alpha" class="mdl-tabs__tab is-active" style="color:white;" >Alpha</a>
<a href="#beta" class="mdl-tabs__tab" style="color:white;" >Beta</a>
<a href="#gamma" class="mdl-tabs__tab" style="color:white;" >Gamma</a>
</div>
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-right-button"><i class="material-icons">chevron_right</i></div>
<section id="alpha" class="mdl-tabs__panel is-active" style="background-color:pink;" >
What is Lorem Ipsum?
em Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors nefore always free from repetition, injected humour, or non-characteristic words etc.
</section>
<section id="beta" class="mdl-tabs__panel" style="background-color:wheat;" >terdum ex, id feugiat libero orci ornare mauris. Nulla et est porttitor, facilisis nibh at, blandit velit. Mauris aliquet orci eu ante mollis auctor. Vivamus tristique vitae sem sit amet dictum. Nulla sit amet feugiat nibh. Fusce interdum felis in ex interdum, id eleifend lectus sodales. Praesent ultrices tincidunt magna nec cursus. Vivamus turpis ligula, luctus eget semper sed, gravida eget felis.
nean mauris urna, sagittis in urna sed, condimentum pretium arcu.
</section>
<section id="gamma" class="mdl-tabs__panel" style="background-color:grey;" >
(de Finibus Bonorum et Malorum) للمفكر شيشيرون (Cicero) والذي كتبه في عام 45 قبل الميلاد. هذا الكتاب هو بمثابة مقالة علمية مطولة في نظرية الأخلاق، وكان له شعبية كبيرة في عصر النهضة. السطر الأول من لوريم إيبسوم "Lorem ipsum dolor sit amet.." يأتي من سطر في القسم 1.20.32 من هذا الكتاب.
للمهتمين قمنا بوضع نص لوريم إبسوم القياسي والمُستخدم منذ القرن الخامس عشر في الأسفل. وتم أيضاً توفير الأقسام 1.10.32 و 1.10.33 من "حول أقاصي الخير والشر" (de Finibus Bonorum et Malorum) لمؤلفه شيشيرون (Cicero) بصيغها الأصلية، مرفقة بالنسخ الإنكليزية لها والتي قام بترجمتها هـ
</section>
</section><!-- .mdl-tabs.mdl-js-tabs -->
-------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<section id="tabs-container2" class="mdl-tabs mdl-js-tabs tabs-container2">
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-left-button"><i class="material-icons">chevron_left</i></div>
<div class="mdl-tabs__tab-bar tabs-bar">
<a href="#delta" class="mdl-tabs__tab is-active" style="color:white;" >Alpha</a>
<a href="#zelda" class="mdl-tabs__tab" style="color:white;" >Beta</a>
</div>
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-right-button"><i class="material-icons">chevron_right</i></div>
<section id="delta" class="mdl-tabs__panel" style="background-color:green;" >
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac diam sem. Maecenas congue leo e
</section>
<section id="zelda" class="mdl-tabs__panel" style="background-color:yellow;" >
للمهتمين قمنا بوضع نص لوريم إبسوم القياسي والمُستخدم منذ القرن الخامس عشر في الأسفل. وتم أيضاً توفير الأقسام 1.10.32 و 1.10.33 من "حول أقاصي الخير والشر" (de Finibus Bonorum et Malorum) لمؤلفه شيشيرون (Cicero) بصيغها الأصلية، مرفقة بالنسخ الإنكليزية لها والتي قام بترجمتها هـ
</section>
</section> <!-- .mdl-tabs.mdl-js-tabs -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<section id="tabs-container3" class="mdl-tabs mdl-js-tabs tabs-container3">
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-left-button"><i class="material-icons">chevron_left</i></div>
<div class="mdl-tabs__tab-bar tabs-bar">
<a href="#maroon" class="mdl-tabs__tab is-active" style="color:white;" >Alpha</a>
<a href="#orange" class="mdl-tabs__tab" style="color:white;" >Beta</a>
</div>
<div class="mdl-layout__tab-bar-button mdl-layout__tab-bar-right-button"><i class="material-icons">chevron_right</i></div>
<section id="maroon" class="mdl-tabs__panel" style="background-color:maroon;" >
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac diam sem. Maecenas congue leo eu suscipit mollis. Nunc efficitur phar
</section>
<section id="orange" class="mdl-tabs__panel" style="background-color:orange;" >
orem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac diam sem. Maecenas congue leo eu suscipit mollis. Nunc efficitur pharetra magna, eu rutrum est. Duis quis diam sed neque accumsan condimentum sit amet non felis. Integer efficitur porta nisi non tristique. Cras efficitur massa metus, in scelerisque elit dictum ac. Nulla viverra, ligula non vestibulum tincidunt, turpis erat interdum ex, id feugiat libero orci ornare mauris. Nulla et est porttitor,
</section>
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
<!-- -------------------------------------------------------------------------------- -->
</main>
</div>
您希望在单击菜单项时显示的其他部分缺少 class。
检查这两个部分
<section id="delta" class="mdl-tabs__panel is-active" style="background-color:green;" >
和
<section id="maroon" class="mdl-tabs__panel is-active" style="background-color:maroon;" >
注意它现在有 class mdl-tabs__panel 和 is-active.
在您的 jsfiddle 中，您缺少这两个部分的 is-active class。