Question

JSFiddle here.

在这个MCVC中，我有一个侧抽屉（通过点击左上角按钮打开），其中有三个链接标有Link One，Link Two和Link Three。这些链接中的每一个都有一个 href ，其值等于#，与此链接所对应的id的{{1}}连接。

在CSS中，与这些链接相对应的所有三个<section>都会获得 <section> ，但第一个 display:none

我为这些链接编写了一个JS click处理程序。这个函数的作用是隐藏（JQuery display:block）当前显示的hide()和显示（JQuery <section>）{ {1}}对应于点击的链接。

问题：

当我点击侧抽屉中的链接时，与其对应的show()确实得到<section>（我在浏览器的检查员中检查过）。到目前为止一切都很好。

但是

问题是当我点击侧抽屉中的链接时，不会显示新显示的<section>中第一个标签的内容。而是显示白色空白区域。

我哪里错了？我错过了什么？

display:block;

<section>

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

Answer 1

您希望在点击菜单项时显示其他部分的课程。

检查这两部分

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

请注意，它现在有类 mdl-tabs__panel 且是活跃的。

在你的jsfiddle中，你错过了这两个部分的 is-active 类。

通过单击侧边框中的链接显示的<section>中的第一个Tab的内容不会显示。为什么？

1 个答案: