Question

我在项目中使用Material Design Lite，我的设置页面中有一些mdl-tab选项卡。但是，某些设置仅在满足某些条件时才有用。除非条件得到满足，否则我希望有一个禁用的标签。

这就是我现在正在做的事情，但这并不起作用：

<div class="mdl-tabs__tab-bar">
  <a href="#displaySettings" class="mdl-tabs__tab is-active">Display</a>
  <a href="#deviceSettings" class="mdl-tabs__tab" disabled="disabled">Device</a>
  <a href="#measSettings" class="mdl-tabs__tab" disabled="disabled">Measurement</a>
</div>

是否有任何方式来执行此操作？如果是这样，怎么样？

该项目位于科尔多瓦。因此欢迎HTML，CSS，Javascript和JQuery答案。

Answer 1

我刚刚在我的项目中解决了类似的问题。我知道我有点迟了但我希望这可能会对将来有所帮助。

在没有课程或文字的情况下渲染您的页面。

<div class="mdl-tabs__tab-bar">
    <a href="#displaySettings" class="mdl-tabs__tab is-active">Display</a>
    <a id=deviceTab href="#deviceSettings"></a>
    <a id=measurementTab href="#measSettings"></a>
</div>

你应该在输入上添加监听器（你的条件需要），当条件满足时，只需添加class（mdl-tabs__tab）和text（Device，Measurement）。

你可以用jQuery做到这一点 $("#deviceTab").addClass("mdl-tabs__tab").text("Device"); $("#measTab").addClass("mdl-tabs__tab").text("Measurement");

如果用户删除了所需的信息，您可以再次删除文本和课程，而且他无法点击标签。

<div class="mdl-tabs__tab-bar">
   <a href="#displaySettings" class="mdl-tabs__tab is-active">Display</a>
   <a id="deviceTab" href="#deviceSettings" class="mdl-tabs__tab">Device</a>
   <a id="measTab" href="#measSettings"class="mdl-tabs__tab">Measurement</a>
</div>

Answer 2

您可以通过从标记中删除href属性来实现此目的，同时仍保留类和链接文本。这将使选项卡看起来像一个选项卡，当您想要启用它时，只需添加带有您要激活的选项卡面板的ID的href。

如何禁用mdl选项卡

2 个答案: