材料設計精簡菜單

我正在使用材料設計精簡版。材料設計精簡菜單

在我的儀表板菜單中，我試圖顯示4個選項卡。

我嘗試了很多方法來顯示我的儀表板URL上的4個選項卡。

這是我的儀表盤菜單---

<html> 
    <head> 
    <!-- Material Design Lite --> 
    <script src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
    <!-- Material Design icon font --> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    </head> 
    <body> 
    <!-- Uses a header that scrolls with the text, rather than staying 
     locked at the top --> 
    <div class="mdl-layout mdl-js-layout"> 
     <header class="mdl-layout__header mdl-layout__header--scroll"> 
     <div class="mdl-layout__header-row"> 
      <!-- Title --> 
      <span class="mdl-layout-title">Chris</span> 
      <!-- Add spacer, to align navigation to the right --> 
      <div class="mdl-layout-spacer"></div> 
      <!-- Navigation --> 
      <nav class="mdl-navigation"> 
      <a class="mdl-navigation__link" href="">Dashboard</a> 
      <a class="mdl-navigation__link" href="">Dashboard 2</a> 
      <a class="mdl-navigation__link" href="">Dashboard 3</a> 
      <a class="mdl-navigation__link" href="">Dashboard 4</a> 
      </nav> 
     </div> 
     </header> 
     <div class="mdl-layout__drawer"> 
     <span class="mdl-layout-title">Chris</span> 
     <nav class="mdl-navigation"> 
      <a class="mdl-navigation__link" href="">Dashboard</a> 
      <a class="mdl-navigation__link" href="">Dashboard 2</a> 
      <a class="mdl-navigation__link" href="">Dashboard 3</a> 
      <a class="mdl-navigation__link" href="">Dashboard 4</a> 
     </nav> 
     </div> 
     <main class="mdl-layout__content"> 
     <div class="page-content"><!-- Your content goes here --></div> 
     </main> 
    </div> 
    </body> 
</html>

這是我試圖我的控制面板菜單上添加我的選項卡菜單--- https://codepen.io/anon/pen/JKkvgA

任何一個知道我可以如何合併這2並僅在儀表板菜單選項上顯示4個選項卡！

任何意見或建議將非常感謝！

來源

2016-07-27 Christofer Hansen

這是怎麼回事？

<html> 
    <head> 
    <!-- Material Design Lite --> 
    <script src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
    <!-- Material Design icon font --> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
    </head> 
    <body> 
    <!-- Uses a header that scrolls with the text, rather than staying 
     locked at the top --> 
    <div class="mdl-layout mdl-js-layout"> 
     <header class="mdl-layout__header mdl-layout__header--scroll"> 
     <div class="mdl-layout__header-row"> 
      <!-- Title --> 
      <span class="mdl-layout-title">Chris</span> 
      <!-- Add spacer, to align navigation to the right --> 
      <div class="mdl-layout-spacer"></div> 
      <!-- Navigation --> 
      <nav class="mdl-navigation"> 
      <a class="mdl-navigation__link" href="">Dashboard</a> 
      <a class="mdl-navigation__link" href="">Dashboard 2</a> 
      <a class="mdl-navigation__link" href="">Dashboard 3</a> 
      <a class="mdl-navigation__link" href="">Dashboard 4</a> 
      </nav> 
     </div> 
     <!-- Tabs --> 
     <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> 
      <a href="#dashboard_tab_1" class="mdl-layout__tab is-active">Dashboard Tab 1</a> 
      <a href="#dashboard_tab_2" class="mdl-layout__tab">Dashboard Tab 2</a> 
      <a href="#dashboard_tab_3" class="mdl-layout__tab">Dashboard Tab 3</a> 
      <a href="#dashboard_tab_4" class="mdl-layout__tab">Dashboard Tab 4</a> 
     </div> 
     </header> 
     <div class="mdl-layout__drawer"> 
     <span class="mdl-layout-title">Chris</span> 
     <nav class="mdl-navigation"> 
      <a class="mdl-navigation__link" href="">Dashboard</a> 
      <a class="mdl-navigation__link" href="">Dashboard 2</a> 
      <a class="mdl-navigation__link" href="">Dashboard 3</a> 
      <a class="mdl-navigation__link" href="">Dashboard 4</a> 
     </nav> 
     </div> 
     <main class="mdl-layout__content"> 
     <div class="page-content"><!-- Your content goes here --></div> 
     </main> 
    </div> 
    </body> 
</html>

來源

2016-07-27 21:54:26 Nicolapps

非常感謝您的出色答案，但是我想要的是當我選擇只有dashboard2比4個選項卡出現，而不是儀表板，儀表板3和儀表板4！你知道我該怎麼做！再次感謝您的出色答案:) –

爲每個儀表板頁面（dashboard1.html，dashboard2.html，dashboard3.html和dashboard4.html）製作一個HTML文件，並僅將該選項卡HTML代碼添加到dashboard2.html頁面。只要確保不同的HTML頁面彼此鏈接！ – Nicolapps

材料設計精簡菜單

回答

相關問題