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

Question

我正在尝试使用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>

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

有什么想法吗？

Answer 1

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

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

• foo.html
• 一个bar.html
• other.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>

Answer 2

我还没有找到涟漪效应，但这里是如何让基本的Tab看起来与页面更改有关：

        <!-- 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;
}