Html 材料设计精简菜单_Html_Css_Material Design

Html 材料设计精简菜单

html css

Html 材料设计精简菜单,html,css,material-design,Html,Css,Material Design,我使用的是材料设计lite 在我的仪表板菜单中，我试图显示4个选项卡我尝试了多种方式在我的仪表板URL上显示4个选项卡这是我的仪表盘菜单--- 克里斯克里斯这是我的标签菜单，我正试图添加到我的仪表板菜单--- 任何人都知道我如何合并这2个选项卡，并仅在仪表板菜单选项上显示4个选项卡任何建议都将不胜感激这个怎么样 <html> <head>  <script

我使用的是材料设计lite

在我的仪表板菜单中，我试图显示4个选项卡

我尝试了多种方式在我的仪表板URL上显示4个选项卡

这是我的仪表盘菜单---


克里斯
克里斯

这是我的标签菜单，我正试图添加到我的仪表板菜单---

任何人都知道我如何合并这2个选项卡，并仅在仪表板菜单选项上显示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>
        <!-- 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>


克里斯
克里斯

非常感谢您的精彩回答，但我想要的是，当我只选择dashboard 2时，会出现4个选项卡，而不是dashboard、dashboard 3和dashboard 4！！你知道我怎么做吗！！！再次感谢您的精彩回答：）为每个仪表板页面（dashboard1.HTML、dashboard2.HTML、dashboard3.HTML和dashboard4.HTML）创建一个HTML文件，只向dashboard2.HTML页面添加选项卡HTML代码。只需确保不同的HTML页面相互链接即可！

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