时间戳

首页 > 解决方案 > 除非我单击 Web 图标，否则按钮不会打开链接

html - 除非我单击 Web 图标，否则按钮不会打开链接

问题描述

我创建的链接到我的社交媒体的按钮没有按预期工作。当我单击按钮时，除非我单击链接的图标，否则它不会打开链接。

联系我们标题和四个社交媒体图标的屏幕截图。

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


<section id="contact" class="py-5 text-center">
  <div class="container text-center ml-auto">
    <div class="row">
      <div class="col">
        <div class="info-header md-5 text-light ">
          <h1 class="text-primary pb-3">CONTACT US</h1>
          <button class="btn btn-outline-success mr-3">
              <a style="color: green;" target="_blank" href="https://wa.me/2349080237740"><i class="fa fa-whatsapp fa-1x"></i></a>
          </button>
          <button class="btn btn-outline-primary mr-3">
              <a class="text-primary" target="_blank" href="https://t.me/dopewilly"><i class="fa fa-telegram fa-1x"></i></a>
          </button>
          <button class="btn btn-outline-danger mr-3">
              <a class="text-danger" target="_blank" href="#"><i class="fa fa-instagram fa-1x"></i></a>
          </button>
          <button class="btn btn-outline-info">
              <a target="_blank" href="#"><i class="fa fa-twitter fa-1x"></i></a>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

标签： htmlcss

解决方案

与其让<a>内部<button>无效并产生您遇到的问题，不如将您的<button>类移动到<a>并在之后删除<button>标签，如下所示：

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>


<section id="contact" class="py-5 text-center">
  <div class="container text-center ml-auto">
    <div class="row">
      <div class="col">
        <div class="info-header md-5 text-light ">
          <h1 class="text-primary pb-3">CONTACT US</h1>
              <a class="btn btn-outline-success mr-3" style="color: green;" target="_blank" href="https://wa.me/2349080237740"><i class="fa fa-whatsapp fa-1x"></i></a>
              <a class="btn btn-outline-primary mr-3 text-primary" target="_blank" href="https://t.me/dopewilly"><i class="fa fa-telegram fa-1x"></i></a>
              <a class="btn btn-outline-danger mr-3 text-danger" target="_blank" href="#"><i class="fa fa-instagram fa-1x"></i></a>
              <a class="btn btn-outline-info" target="_blank" href="#"><i class="fa fa-twitter fa-1x"></i></a>
        </div>
      </div>
    </div>
  </div>
</section>

推荐阅读