CSS/HTML模板内按钮链接失效，点击仅触发动画不跳转求助

你的判断完全正确——问题就出在那段JavaScript代码里！核心原因是你给整个.card元素绑定了点击事件，并且在事件开头用e.preventDefault()阻止了所有点击的默认行为，包括按钮的跳转动作。按钮嵌套在.card内部，点击按钮时事件会冒泡到.card元素，触发preventDefault()直接拦截了跳转。

我们只需要给点击事件加个判断：如果点击的目标是按钮（.btn），就跳过卡片的切换逻辑，不阻止默认行为。修改后的代码如下：

$(document).ready(function(){ 
  var zindex = 10; 
  $("div.card").click(function(e){ 
    // 判断点击目标是否是按钮，如果是则不执行后续拦截逻辑
    if ($(e.target).hasClass("btn")) {
      return;
    }
    e.preventDefault(); 
    var isShowing = false; 
    if ($(this).hasClass("show")) { 
      isShowing = true 
    } 
    if ($("div.cards").hasClass("showing")) { 
      $("div.card.show").removeClass("show"); 
      if (isShowing) { 
        $("div.cards").removeClass("showing"); 
      } else { 
        $(this).css({zIndex: zindex}).addClass("show"); 
      } 
      zindex++; 
    } else { 
      $("div.cards").addClass("showing"); 
      $(this).css({zIndex:zindex}).addClass("show"); 
      zindex++; 
    } 
  }); 
});

说明： #

1. 新增的if ($(e.target).hasClass("btn"))判断会检查当前点击的元素是不是按钮，如果是，直接返回不执行后续代码，这样按钮的默认跳转行为就不会被e.preventDefault()拦截。
2. 其他卡片的展开/收起逻辑保持不变，完全不影响原有交互。

你可以直接替换这段JS代码，之后点击按钮就能正常跳转到目标页面，同时卡片的动画交互也能正常工作啦！

内容的提问来源于stack exchange，提问作者Gergian