Question

我有这样的导航：

<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>元素后，我想用强调色添加涟漪效果。然后我希望这个元素保持选中状态。我怎么能这样做？

Answer 1

编辑：请注意，根据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
}

你可以在这个小提琴中试试：Demo

Answer 2

只使用类 class =“mdl-navigation__link mdl-js-button mdl-js-ripple-effect”

并添加了css：

var session = require('express-session');
var MongoStore = require('connect-mongo/es5')(session);
var mongoose = require('mongoose');

将完成这一操作，不需要所有其他类和javascript。

单击“mdl-navigation__link”时MDL会添加涟漪效果

2 个答案: