如何在没有 JavaScript 的情况下使用 Material Design Lite 选项卡？答案

【问题标题】：How to use Material Design Lite tabs without JavaScript?如何在没有 JavaScript 的情况下使用 Material Design Lite 选项卡？
【发布时间】：2016-01-02 23:18:33
【问题描述】：

我正在尝试使用Material Design Lite tabs，但遇到了一些麻烦

看起来它们是用于标签面板都在同一页面上可用的地方

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-tabs__tab-bar">
      <a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a>
      <a href="#lannisters-panel" class="mdl-tabs__tab">Lannisters</a>
      <a href="#targaryens-panel" class="mdl-tabs__tab">Targaryens</a>
  </div>

  <div class="mdl-tabs__panel is-active" id="starks-panel">
    <ul>
      <li>Eddard</li>
      <li>Catelyn</li>
      <li>Robb</li>
      <li>Sansa</li>
      <li>Brandon</li>
      <li>Arya</li>
      <li>Rickon</li>
    </ul>
  </div>
  <div class="mdl-tabs__panel" id="lannisters-panel">
    <ul>
      <li>Tywin</li>
      <li>Cersei</li>
      <li>Jamie</li>
      <li>Tyrion</li>
    </ul>
  </div>
  <div class="mdl-tabs__panel" id="targaryens-panel">
    <ul>
      <li>Viserys</li>
      <li>Daenerys</li>
    </ul>
  </div>
</div>

但是，我希望它们看起来与上面的选项卡相同，但行为更像这样

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-tabs__tab-bar">
      <a href="/foo" class="mdl-tabs__tab is-active">Foo</a>
      <a href="/bar" class="mdl-tabs__tab">Bar</a>
      <a href="/other" class="mdl-tabs__tab">Other</a>
  </div>
</div>

但这对我不起作用。当我点击链接时，浏览器不会导航到新页面。

有什么想法吗？

【问题讨论】：

问题，您是否有一个名为 /foo 的页面或了解如何处理该 URL 的服务？
@ochi 出于所有意图和目的，只需将其视为静态 html。没什么特别的。
我觉得我在你的问题中遗漏了一些东西。如果您请求的是静态 HTML，则您的 URL 不正确。一个常规链接 (href) 将向服务器请求一个名为 /foo 的文件，除非你有这样的文件（并且服务器知道如何响应这样的 URL），否则你不会得到任何东西（可能是 404）。换句话说，你会得到默认的浏览器行为（因为你想避免使用 JS 来劫持它来做其他事情，比如标签）

标签： css material-design

【解决方案1】：

我显然在你的问题中遗漏了一些东西，但由于我对它的理解有限，这就是我要做的：

您需要为每个选项卡创建一个新的 HTML 文件。在你的情况下：

foo.html
bar.html
其他.html

除了.is-active 类被放置在不同的选项卡中（每个页面）之外，您的选项卡面板看起来都像这样

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-tabs__tab-bar">
      <a href="/foo.html" class="mdl-tabs__tab is-active">Foo</a>
      <a href="/bar.html" class="mdl-tabs__tab">Bar</a>
      <a href="/other.html" class="mdl-tabs__tab">Other</a>
  </div>
</div>

每个页面也有类似这样的内容div，其 id 与页面名称匹配。即

<div class="mdl-tabs__panel is-active" id="foo">
    <ul>
      <li>Eddard</li>
      <li>Catelyn</li>
      <li>Robb</li>
      <li>Sansa</li>
      <li>Brandon</li>
      <li>Arya</li>
      <li>Rickon</li>
    </ul>
  </div>

【讨论】：

【解决方案2】：

我还没有弄清楚涟漪效应，但这里是如何让基本的选项卡外观与页面更改一起工作：

        <!-- Tabs -->
    <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
        <a href="/foo" class="my-tab is-active">Link 1</a>
        <a href="/bar" class="my-tab">Link 2</a>
    </div>

对于 CSS 部分：

.mdl-layout--fixed-tabs .my-tab 
{
    float: none;
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    padding: 0;
}

.my-tab 
{
    margin: 0;
    border: none;
    padding: 0 24px;
    float: left;
    position: relative;
    display: block;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    text-decoration: none;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    color: rgba(255,255,255,.6);
    overflow: hidden;
}

.mdl-layout.is-upgraded .my-tab.is-active::after 
{
    height: 2px;
    width: 100%;
    display: block;
    content: " ";
    bottom: 0;
    left: 0;
    position: absolute;
    background: #fff;
}

【讨论】：