1

我对材料设计精简版中的标签有疑问。这是 mdl 中选项卡的示例用法。

<div class="mdl-tabs mdl-js-tabs">
  <div class="mdl-tabs__tab-bar">
    <a href="#tab1" class="mdl-tabs__tab">Tab One</a>
    <a href="#tab2" class="mdl-tabs__tab">Tab Two</a>
  </div>
  <div class="mdl-tabs__panel is-active" id="tab1">
    <p>First tab's content.</p>
  </div>
  <div class="mdl-tabs__panel" id="tab2">
    <p>Second tab's content.</p>
  </div>
</div>

对于内容简单的标签看起来很简单，但是如果我有很多标签，每个标签都包含复杂的内容。如何使选项卡像简单的 ActionLinks 一样工作，并具有波纹动画和is-active类等所有特权。我的解决方案是将链接放入这样的选项卡中。

<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
    @foreach (var tab in Model)
    {
        @Html.ActionLink(@tab.Name, "Tab", "Index", null, new { @Class = "mdl-layout__tab" })
    }
</div>

但链接不起作用，我收到此错误：

未捕获的类型错误：无法读取 null 的属性“classList”

显然，我做错了什么，或者将标签用于非设计用途。

4

0 回答 0