Material Design Lite（简称MDL）是Google为Web设计的Material Design。请注意，Material Design Lite目前仅支持**，这意味着没有进一步的开发。请考虑使用Web的Material Design组件。
请告诉我如何使用 URL 链接切换选项卡？ 我需要获得特定选项卡的直接链接 请告诉我如何使用 URL 链接切换选项卡？ 我需要获得特定选项卡的直接链接 <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a> <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a> <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a> </div> 对于 Material Design Lite（或类似的），您可以动态确定是否将 is_active 应用于选项卡 因此，您可以使用以下格式的 URL 来执行您想要的操作 https://yourdomain/tab.php?tab=1 https://yourdomain/tab.php?tab=2 https://yourdomain/tab.php?tab=3 然后使用条件语句，例如 if ($_REQUEST["tab"]=="1") { $active1="is-active"; } 因此，示例代码将是： <script src="https://code.getmdl.io/1.3.0/material.min.js"></script> <link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" /> <?php if ($_REQUEST["tab"]=="1") { $active1="is-active"; } if ($_REQUEST["tab"]=="2") { $active2="is-active"; } if ($_REQUEST["tab"]=="3") { $active3="is-active"; } ?> <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 <?php echo $active1;?>">Starks</a> <a href="#lannisters-panel" class="mdl-tabs__tab <?php echo $active2;?>">Lannisters</a> <a href="#targaryens-panel" class="mdl-tabs__tab <?php echo $active3;?>">Targaryens</a> </div> <div class="mdl-tabs__panel <?php echo $active1;?>" 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 <?php echo $active2;?>" id="lannisters-panel"> <ul> <li>Tywin</li> <li>Cersei</li> <li>Jamie</li> <li>Tyrion</li> </ul> </div> <div class="mdl-tabs__panel <?php echo $active3;?>" id="targaryens-panel"> <ul> <li>Viserys</li> <li>Daenerys</li> </ul> </div> </div> 看 演示选项卡1 演示选项卡2 演示选项卡3
我正在使用布局组件页面中的 mdl 选项卡栏。 我正在使用布局组件页面中的 mdl 选项卡栏。 <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <!-- Title --> <span class="mdl-layout-title">Title</span> </div> <!-- Tabs --> <div class="mdl-layout__tab-bar mdl-js-ripple-effect"> <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a> <a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a> <a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a> </div> </header> 我是否必须在两个选项卡/面板上添加/删除“is-active”类，或者是否有更简单的方法以编程方式选择选项卡？ 据我所知，手动更改选项卡 (is-active) 和选项卡面板 (.mdl-layout__tab) 上的 .mdl-layout__tab-panel 类确实会产生所需的结果。 使用 jQuery： // remove all is-active classes from tabs $('a.mdl-layout__tab').removeClass('is-active'); // activate desired tab $('a[href="#fixed-tab-2"]').addClass('is-active'); // remove all is-active classes from panels $('.mdl-layout__tab-panel').removeClass('is-active'); // activate desired tab panel $('#fixed-tab-2').addClass('is-active'); 您可以通过在 DOM 元素上使用 Click() 方法来模拟 Click 事件。 document.getElementById("AnchorTagId").click() 您可以使用 jquery 模拟单击选项卡按钮 ex（以编程方式激活第二个选项卡 - 索引 1）： $(".mdl-layout__tab:eq(1) span").click (); ex（以编程方式激活第一个选项卡 - 索引 0）： $(".mdl-layout__tab:eq(0) span").click (); 目前没有编程方式来切换布局选项卡或普通选项卡。用于处理这些的对象不通过小部件系统公开，因此没有指导它们做什么。 请在问题跟踪器上提交功能请求，以便我们为未来的版本提供可操作的内容。 使用 mdl（@版本 v1.2.1） 你可以用 jQuery 模拟点击事件： $(".mdl-tabs__tab:eq(0) span").click (); //for the first tab (index 0) $(".mdl-tabs__tab:eq(1) span").click (); //for the second tab (index 1) ... 在 Firefox 50.0 - 50.0.2 和 Microsoft Edge 38.14393.0.0 上测试 看来此功能自 2017 年 6 月起已包含在 MDL 代码中 https://github.com/google/material-design-lite/pull/5091 但是自 2016 年 12 月以来就没有发布过 使用 jQuery 的解决方案，包括上一个/下一个功能： $('#next-button').on('click', function() { $('.mdl-tabs__tab.is-active').next().find('span').click(); }); $('#prev-button').on('click', function() { $('.mdl-tabs__tab.is-active').prev().find('span').click(); }); 它对我有用 $('#tabid').tabs('select', 'select-Id'); 请告诉我如何使用 URL 链接切换选项卡？
我有一个包含许多列的简单表格，我希望在调整浏览器窗口大小时自动缩小列。表格响应式与 Bootstrap 配合使用，但我正在寻找
问题： 是否有 SASS 函数/技术可以将十六进制值转换为简单的 RGB 字符串。 这里简单意味着只是一个字符串而不将其包含在 rgb() 中？ 例如：#D50000 --> ...
我正在开发一个 Chrome 扩展，它将一些 UI React 组件注入到页面中。 UI组件来自react-mdl。使用它们需要我在项目顶部包含一个 css 文件。
使用 Angular 2 Material Design Lite 创建垂直时间轴
我想创建某些元素的垂直时间轴。目前，我正在使用 angular2 material design lite 中的多个组件构建时间线。 到目前为止我有以下代码： <...
System.IndexOutOfRangeException错误，因为 "材料设计精简"。
我想在我的asp.net网页项目中使用https:/material.io。我把它放在style.bundle中，然后我得到一个错误。System.IndexOutOfRangeException我把捆绑中的material.min.css删除了，之后......
我想知道在 material design lite 中添加标题到一行的推荐方法是什么。下面我有一行（即：网格），里面有两列。假设我想添加一个titleheading到它。当你...
我真的很想知道，有没有办法用素材设计精简版在下拉中创建一个多选选项，我到处搜索，也只能用 ...
对后来通过Javascript添加的元素执行Javascript失败
在我目前正在研究的项目中，有许多项目必须打开对话框。对于每个新对话框，内部数据都会发生变化，而我使用Javascript完成了这些操作。现在，如果我添加任何...
我正在制作onclick函数，然后通过从javascript附加进度条来显示进度条。我也在使用材料设计lite CDN。组件已添加，但未显示在UI上。 ...
我一直在尝试将我的网站https://lavanoid.github.io移植到一个更多的“ Google Standard”，但确实令人沮丧（感谢Google，据我所知，它并没有很好地记录内容：// ）。我是...
Material Design Lite-Multi-select dropdown
如何使用Material Design Lite库创建多选下拉列表？我似乎找不到任何东西。我基本上是这样的：codepen.io/pen /？＆editable = true＆...
我正在将Google Material Design Lite（MDL）用于网络，因此无法将导航抽屉放在右侧。该文档没有有关如何执行此操作的信息。这甚至可能吗？...
使用MDL工具提示时（https://getmdl.io/components/#tooltips-section），工具提示出现在链接到的 下方。我希望工具提示出现在...的右侧]
我一直在尝试使用MDL滑块来制作我的网站，但出现问题。一切正常，但是，当我尝试通过JQuery更改滑块的值时，滑块的“栏”不是...
是否可以将元素上的填充添加到最小高度值中而不是包含在其中？例如，您在元素的顶部和底部有10px的填充，以及min -...
如何垂直拉伸MDL-卡，让一切都拉平？我宁愿在MDL-card__suporting文本是舒展。这里有一个例子http://codepen.io/anon/pen/grGbdb
页面导航后，Material Design Lite输入浮动标签不起作用
我目前正在使用Material Design Lite构建移动混合应用程序，但我遇到了一个小问题。当我将输入字段元素添加到我的页面时，浮动文本甚至是......