0
私は、単一ページアプリケーションフォーマットを使用してMaterial Design Liteを学習しようとしています。私は常にメニューを使用することなく、異なるコンテンツタブにリンクしたいと考えています。私は何をしようとしているのかを示すサンプルを作成しました。私は誰かが私が成功を見つけるのを助けることを望んでいます。MDL、SPAの異なるコンテンツタブへのコンテンツリンクが機能しない
マイコードは、次の私は、次のStackOverflowスレッドとフィドルのコードは私が必要なものだけであることがわかっ同様のソリューションを探している人のために
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<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="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
</div>
</header>
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
<br />
<div class="page-content"> Tab Panel 1</div>
<p id="top">
<br />
<a href="#scroll-tab-2">Jump to Tab Panel 2 - Not working</a>
<br /> <br />
<a href="#bottom">Jump to bottom</a>
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<p id="bottom">
tab panel bottom<br /> <br />
<a href="#top">Jump to Top</a>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<br />
<div class="page-content">Tab Panel 2</div><br /><br />
<a href="#scroll-tab-1">Jump to Tab 1 - Not working</a>
</section>
</main>
</div>
</body>
</html>