Question

我在网上找到了这个漂亮的按钮。现在我想知道甚至可以将它与它联系起来吗？按钮的状态需要<a href"">，href的第二个div不存在不起作用。创作者是否犯了一个小错误，或者这样的按钮是否永远不起作用？

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

Answer 1

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

如果您将href与其他页面一起使用，则在离开页面时将看不到thank you - 。

如果没有JavaScript，href上的div将无法运行。按钮效果在没有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。

Answer 2

alt href属性只对元素有用，你可以将click事件添加到任何元素来调用url

或者你可以用a

包装一个span

CSS按钮两个链接

2 个答案: