CSS Button 两个链接答案

【问题标题】：CSS Button two linksCSS Button 两个链接
【发布时间】：2014-05-17 19:25:08
【问题描述】：

我在网上发现了这个漂亮的按钮。现在我想知道是否有可能将某些东西与它联系起来？按钮状态需要<a href"">，而div 的第二个href indside 不起作用。是创作者犯了一个小错误，还是这样的按钮永远不起作用？

http://codepen.io/seansean11/pen/wHIae

【问题讨论】：

使用 JS。 <div onClick="widow.location=http://mydomain.com/?param=value">Thank You</div>
这个按钮的特别之处在于它可以在没有 javascript 的情况下工作。
使用标签而不是
。我相信你可以通过 css 改变他。
如果你试一试你会发现它不起作用:(

【解决方案1】：

虽然 href 属性只对元素起作用，但您可以将点击事件添加到任何元素以调用 url

或者你可以用 a 包裹一个跨度

【讨论】：

如果你用a 元素包裹它，它会破坏整个点击效果。

【解决方案2】：

我认为这个按钮的目的是用 AJAX 发送一些东西（可能是一个表单），然后显示thank you-side。

如果您将它与href 一起使用到另一个页面，您在离开页面时将看不到thank you 端。

如果没有一些 JavaScript，div 上的 href 将永远无法工作。按钮效果在没有 JavaScript 的情况下也能工作，但它本身就毫无意义。

更新了示例以将其用作下载链接

为了使按钮对非 JS 用户有效，您应该将 href 设置为您希望他们下载的文件。对于非 JS 用户，不幸的是它不会显示 thank you-side。我还在按钮中添加了一个 ID (#btn-download)，以便在 JS 中轻松获取它。

HTML

<a id="btn-download" href="http://www.domain.com/some_file.pdf" class="flipper-container">
    <div id="id" class="flipper">
        <div class="front-face" data-icon="&#x27a3;">Click Me</div>
        <div class="back-face" data-icon="&#10003;">Thank You</div>
    </div>
</a>

JavaScript

(function (d, w) {
    var button = d.getElementById('btn-download');
    // Store the download link
    var downloadLink = button.href;

    // Set the href back to the id of .flipper
    button.href = '#' + d.getElementById('id').id;

    // Add the cross browser event listener
    addEvent('click', button, function() {
        // Send the user to the download link
        w.location = downloadLink;
    });
}(document, window));

// Taken from http://stackoverflow.com/a/6927800/3351720
// This is only to support IE8 and below
function addEvent(evnt, elem, func) {
    if (elem.addEventListener) { // W3C DOM
        elem.addEventListener(evnt, func, false);
    }
    else if (elem.attachEvent) { // IE DOM
        elem.attachEvent('on' + evnt, func);
    }
    else { // Not much to do
        elem[evnt] = func;
    }
}

我没有在各种浏览器中测试过它，但我认为它应该适用于所有现代浏览器（Chrome、Firefox、Opera 和 Safari）和 Internet Explorer 至少版本 7。

【讨论】：

好的，嗯，我认为它可以在没有 js 的情况下工作。我想将此技术用作下载按钮。
只需一点点 JavaScript，您就可以完成这项工作。你想要一个例子吗？
会很棒。我也可以为禁用 js 的人做点什么吗？
@user2693017 我已经用 JavaScript（和 HTML）更新了我的答案。如果您对此感到满意，请将其标记为已解决。
谢谢@Ex-iT 我会尽快测试它。 :)