Question

我正在制作一个CSS按钮，并希望将材质设计波纹或波浪效果添加到它。我在codepen上找到了一个简单的脚本，通过应用类＃34; ripple＆＃34;任何元素，如div，按钮，图像，链接等。似乎工作得很好，除了某些原因它实际上打开了应用于我已经制作的按钮的链接。我不是jquery或javascript专家，但我猜它与js有关。当我删除＆＃34;涟漪＆＃34;按钮中的类链接工作正常，但添加后按钮无法启动链接，即使涟漪动画工作正常。

非常感谢任何有关如何解决此问题的帮助。我可以在Material Design Ripple Buttons

找到我正在使用的codepen演示嗯......我知道你说它需要成为一个或另一个，但不确定我是否完全理解你的解释。我可以让它打开原始链接或＆＃34;相同＆＃34;窗口删除目标=＆＃34; _blank＆＃34;但我有点希望能够拥有目标选项，如果可能的话，如果没有两个标签打开新链接。

(function (window, $) {

  $(function() {


$('.ripple').on('click', function (event) {
  window.location = $(this).attr('href');
   /* event.preventDefault(); */

/*HTML Button Code*/
<div class="media__body tagline overtext"><a href="http://www.google.com" class="media-btn-bottom-blue ripple" target="new">Learn More</a></div>

Answer 1

此行event.preventDefault();

阻止了链接的默认行为

尝试在click处理程序的末尾添加此内容：

window.location.href=$(this).data('href'); // **

**假设该链接具有data-href属性，如

<a href="#" data-href="http://www.google.com"class="ripple" >Login</a>

$(function() {
  $('.ripple').on('click', function(event) {
    event.preventDefault();

    var $div = $('<div/>'),
      btnOffset = $(this).offset(),
      xPos = event.pageX - btnOffset.left,
      yPos = event.pageY - btnOffset.top;

    $div.addClass('ripple-effect');
    var $ripple = $(".ripple-effect");

    $ripple.css("height", $(this).height());
    $ripple.css("width", $(this).height());
    $div
      .css({
        top: yPos - ($ripple.height() / 2),
        left: xPos - ($ripple.width() / 2),
        background: $(this).data("ripple-color")
      })
      .appendTo($(this));

    window.setTimeout(function() {
      $div.remove();
    }, 2000);

    //add this
    alert($(this).attr('href'));

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="media__body tagline overtext">
  <a href="http://www.google.com" class="media-btn-bottom-blue ripple" target="_blank">Learn More</a>
</div>

Answer 2

就像ochi指出你必须从你的代码中删除行window.location = $(this).attr('href');。

此处示例：http://codepen.io/anon/pen/ZOYrmx（点击左侧登录按钮应在新标签页中打开google.com）

Answer 3

我已将Craig Tuttle的CodePen扩展为使用固定位置按钮。通过在元素中添加固定的波纹类。还将其移植到ES6，以便可以导入并用作外部模块。

let bindRipples = () => {

  $('.ripple').on("click", event => {
    event.preventDefault()

    let $this = $(event.currentTarget)
    let $div = $('<div/>')
    let btnOffset = $this.offset()
    let xPos
    let yPos

    $div.addClass('ripple-effect')
    let $ripple = $(".ripple-effect")

    $ripple.css("height", $this.height())
    $ripple.css("width", $this.height())

    if(!$this.hasClass('ripple-fixed')) {
      xPos = event.pageX - btnOffset.left
      yPos = event.pageY - btnOffset.top

      $div.css({
        top: yPos - ($ripple.height()/2),
        left: xPos - ($ripple.width()/2),
        background: $this.data("ripple-color")
      })

    } else {
      xPos = event.clientX - $this.offset().left
      yPos = event.clientY - $this.offset().top + $('body').scrollTop()

      $div.css({
        background: $this.data("ripple-color"),
        top: yPos,
        left: xPos,
        position: 'absolute'
      })
    }
    $div.appendTo($this)

    window.setTimeout(() => {
      $div.remove();
    }, 4000)
  })
}

module.exports = bindRipples

完全归功于Craig Tuttle http://codepen.io/Craigtut/pen/dIfzv制作剧本，我刚刚添加了小型计算，使其适用于位置固定元素，并将其写入ES6

MD Ripple按钮无法打开链接

3 个答案: