<div class="mdl-layout--large-screen-only mdl-layout__tab-bar mdl-js-
ripple-effect mdl-color--primary-dark ">
<a href="#Aboutus" class="mdl-layout__tab is-active">Aboutus</a>
<a href="#Technology" class="mdl-layout__tab">Technology</a>
<a href="#Outsource" class="mdl-layout__tab">Outsourcing</a>
<a href="#Training" class="mdl-layout__tab">Training</a>
<a href="#Techblog" class="mdl-layout__tab">Techblog</a>
<a href="#Careers" class="mdl-layout__tab">Careers</a>
<a href="#Contactus" class="mdl-layout__tab">Contactus</a>
<button class="mdl-button mdl-js-button mdl-button--fab mdl-js-
ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--
accent" id="add">
<i class="material-icons" role="presentation">add</i>
<span class="visuallyhidden">Add</span>
</button>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">MaterialDesignLite</span>
<nav class="mdl-navigation">
<a href="#Aboutus" class="mdl-navigation__link">Overview</a>
<a href="#Training" class="mdl-navigation__link">Features</a>
<a href="#features" class="mdl-navigation__link">Details</a>
<a href="#features" class="mdl-navigation__link">Technology</a>
<a href="#features" class="mdl-navigation__link">FAQ</a>
</nav>
</div>
问题:mdl-layout__tab-bar选项卡与section id同步(例如:#Aboutus,#Technology), 其中mdl-drawer需要为每个内容单独的.html文件,它不使用section id(例如:#Aboutus,#Technology),是实现它的任何可能方法,而是创建单独的html文件。 感谢
答案 0 :(得分:0)
<div class="mdl-layout__tab-panelmdl-layout__drawer" id="Techblog">
<section>
<div>
<div>
<div class="techblogimage">
<img class="article-image" src="images/techblog/3.png" border="0" alt="">
</div>
</div>
</div>
</section>
</div>
最后我得到了一个解决方案.. 在sectionblock中添加mdl-layout__drawer 这将有助于他们中的一些人陷入困境......