CSS Button 两个链接

Question

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

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

Answer 1

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

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

如果没有一些 JavaScript，div 上的 href 将永远无法工作。按钮效果无需 JavaScript 即可工作，但它本身有点毫无意义。

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

为了使按钮对非 JS 用户有效，您应该将 href 设置为您希望他们下载的文件。不幸的是，对于非 JS 用户，它不会显示 thank you 端。我还为按钮添加了一个 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。