允许 mdl-layout__tab-bar 中的 <a> 标签作为实际的 <a> 标签发挥作用

Question

有什么方法可以禁用 MDL javascript 以防止 mdl-layout__tab-bar 中的任何 <a> 标签更改 URL？默认情况下，他们只更改 mdl-layout__content 并保留 URL 状态，但这不适用于此网站。

Answer 1

我偶然发现了同样的问题。我的解决方案是通过一个新的 css 标签绕过。我只是简单地复制了默认的 css.

如果其他人需要...这是标签的 css 样式：

.foo {
      height: 48px;
      line-height: 48px;
      float:none;
      -webkit-box-flex:1;
      -webkit-flex-grow:1;
      -ms-flex-positive:1;
      flex-grow:1;
      padding:0;
      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;
      text-align:center;
      font-weight:500;
      font-size:14px;
      text-transform:uppercase;
      color:rgba(255,255,255,.6);
      overflow:hidden
}

允许 mdl-layout__tab-bar 中的 <a> 标签作为实际的 <a> 标签发挥作用

Allow <a> tags in a mdl-layout__tab-bar to function as actual <a> tags

material-design-lite