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

我正试着用电脑，但遇到了一些麻烦

看起来它们应该用于同一页面上所有选项卡面板都可用的地方

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

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

---

有什么想法吗？

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

您需要为每个选项卡创建一个新的HTML文件。就你而言：

• foo.html
• bar.html
• other.html

除了

处于活动状态

类放置在不同的选项卡（每页）中之外，所有选项卡的选项卡面板都是这样的

---

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

您需要为每个选项卡创建一个新的HTML文件。就你而言：

• foo.html
• bar.html
• other.html

除了

处于活动状态

类放置在不同的选项卡（每页）中之外，所有选项卡的选项卡面板都是这样的

---

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

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

---

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

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

---

问题，你有一个叫做“代码> /FoO < /代码>的页面吗？或者有一个理解如何处理URL的服务？没有什么奇怪的事。我觉得我在你的问题中遗漏了什么。如果您请求的是静态HTML，则URL不正确。一个常规链接（

href

）将向服务器请求一个名为

/foo

的文件，除非您有这样的文件（并且服务器知道如何响应这样的URL），否则您将不会得到任何东西（可能是404）。换句话说，你会得到默认的浏览器行为（因为你想避免使用JS来劫持它做一些类似于制表的事情）问题，你有一个叫“代码> /FoO < /代码>的页面还是一个理解如何处理URL的服务？没有什么奇怪的事。我觉得我在你的问题中遗漏了什么。如果您请求的是静态HTML，则URL不正确。一个常规链接（

href

）将向服务器请求一个名为

/foo

的文件，除非您有这样的文件（并且服务器知道如何响应这样的URL），否则您将不会得到任何东西（可能是404）。换句话说，您将获得默认的浏览器行为（因为您希望避免使用JS劫持它来执行其他操作，如选项卡）

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

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