如何在没有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

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

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