我有这样的导航：
<nav class="mdl-navigation mdl-js-ripple-effect">
<a id="submenu" class="mdl-navigation__link" href="#">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
当<a> 元素单击时，我想在其上添加带有强调色的波纹效果。
然后我希望这个元素保持选中状态。我该怎么做？
【问题讨论】：
标签： css material-design material-design-lite
编辑：请注意，根据 OP 的要求，此答案已被编辑以反映 他的 需求。如果您是因为标题而来的，请查看下面的其他答案。这个答案是在涟漪效应完成后保持链接被选中。 （比照他的要求）
您可以通过在标签上设置class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect mdl-button--icon" 轻松添加涟漪效果。然而，由于<a> 标记并不意味着这样做，我们添加了一些 css 以使其工作：
a.mdl-js-ripple-effect {
display: inline-block;//Important, without that the button won't appear correctly
position: relative; //without it, ripple will be shifted
width: 50px; //Same as height, for a perfect circle
height: 50px; // Works with % values too
line-height: 50px; //same as button height, to center the text vertically
text-align: center; //Center horizontally
}
然后，您不希望涟漪效应在最后一次单击的元素上消失。你可以用一些 JQuery 做到这一点：
$('a.mdl-js-ripple-effect').click(function() {
$('a.mdl-js-ripple-effect').removeClass('selected');
$(this).addClass('selected');
});
当您单击任何按钮时，此代码将删除每个按钮的“已选择”类（或任何您想要的），然后再将其再次添加到您仅单击的那个。 然后我们为选定的类设置样式以保持涟漪效果。
.selected .mdl-ripple {//.selected is the class we used in javascript
width: 0; //necessary, or it will be shifted
opacity: 0.3; //To keep the ripple effect visible
}
你可以在这个 Fiddle 中尝试一下：Demo
【讨论】：
只使用类 class="mdl-navigation__link mdl-js-button mdl-js-ripple-effect"
并添加 css：
a.mdl-js-ripple-effect { position: relative; }
可以解决问题，不需要所有其他类和 javascript。
【讨论】：