链接到按钮答案

【问题标题】：Link to a button链接到按钮
【发布时间】：2018-08-27 09:52:46
【问题描述】：

我正在创建一个“游览”页面，其中包括即将上映的演出日期和一个按钮，当点击该按钮时会显示可用门票的数量和一个“购买”选项。我想将“购买”链接到ticketmaster，有人可以帮我解决这个问题吗！？代码如下：

<td> <button  class="btn btn-primary" data-toggle="popover" data-trigger="focus" title="12 Available" data-content="Buy">Tickets</button>
</td>

【问题讨论】：

不使用按钮元素，为什么不使用“a href”元素？

标签： html button bootstrap-4

【解决方案1】：

使用data-html="true"

<td> <button  class="btn btn-primary" data-toggle="popover" data-trigger="focus" title="12 Available" data-html="true" data-content="Buy this product click<a href='https://www.google.com'> here</a>">Tickets</button>
        </td>

https://jsfiddle.net/f9Lm0oew/4/

【讨论】：

【解决方案2】：

你可以使用

<td><a href="yourLink"> <button  class="btn btn-primary" data-toggle="popover" data-trigger="focus" title="12 Available" data-content="Buy">Tickets</button></a>
    </td>

【讨论】：

您好 Abu Bin Oalid，我希望只有“购买”的链接。因此，当用户单击该按钮时，它将显示 2 个弹出窗口，1 个是可用票数，另一个是“购买”选项，单击时它将在新选项卡中打开指向 ticketmaster 的链接

【解决方案3】：

尝试使用onClick="window.location.href = 'http://www.example.com';" 到<button> 元素

<td> <button  class="btn btn-primary" data-toggle="popover" data-trigger="focus" title="12 Available" data-content="Buy" onClick="window.location.href = 'http://www.example.com';">Tickets</button>
</td>

【讨论】：

【解决方案4】：

不确定您的意思，但您可以通过这种简单的方式将按钮链接到 Ticketmaster：

<td> 
    <button  class="btn btn-primary" data-toggle="popover" 
        data-trigger="focus" 
        title="12 Available" 
        data-content="Buy"
        onClick="()=>window.location.href = 'https://www.ticketmaster.com/'"
    >
        Tickets
    </button>
</td>

我添加了一个将按钮链接到 Ticketmaster 的 onClick 事件

【讨论】：

【解决方案5】：

为了让按钮像链接一样，您需要使用 Javascript 为按钮的“onclick”事件添加事件侦听器，这是一种简单的方法：

（将网址替换为您需要的网址）

 <td> <button  class="btn btn-primary" data-toggle="popover" data-trigger="focus" title="12 Available" data-content="Buy" onclick="location.href = 'http:\\ticketmaster.com';">Tickets</button>
</td>

良好的做法是将所有事件处理代码包含在外部 javscript 文件中，但对于一次性应用程序来说，这已经足够了。

如果您想进一步了解，您可以在 MDN 网站() 上找到很多关于 Web 开发的高质量教育材料，这是有关活动的资源：

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

【讨论】：