Question

我制作了一张表格，里面有一些数据，并且有一个单元格包含一个下载pdf文件的按钮。

<td>
    <a  download  target="_blank" href="Bilder/GrundrissA1.pdf"  title="Grundriss A1" >
        <span class="fa fa-file-o"></span>                                     
    </a>
</td>

问题在于，除非我右键单击并“在新标签页中打开”，否则它将无法打开。原因在于表，因为如果我只是在表外使用以下代码，则效果很好

 <a  download  target="_blank" href="Bilder/GrundrissA1.pdf"  title="Grundriss A1" >
     <span class="fa fa-file-o"></span>                                     
 </a>

删除一些内容以查看导致问题的原因后，我发现链接到表的轮播会干扰左键单击

<tr onclick="" data-target="#carousel" data-slide-to="0">

同时删除data-target="#carousel"或data-slide-to="0"均可解决此问题。但是我真的需要这个来控制旋转木马

问题是，如何使下载按钮正常工作，同时又可以通过单击表格行来控制轮播？

这将是该网页的简化版本（没有导航栏，较少的表行，页脚等）

<!DOCTYPE html>
<html lang="en">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="css/Navbar.css">
    <link rel="stylesheet" href="css/Styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Noto Sans' rel='stylesheet'>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


    <title>Home</title>
  </head>
  <body>
    <div class="container-fluid">
        <div class="row justify-content-center align-items-center">
          <div class="col-xs-12 col-md-12 col-lg-7 align-self-center " style="padding-top:5%;padding-bottom:5%;">
            <div class="table-responsive">
              <table class="table">
                <thead class="thead-bordered">
                  <tr>
                    <th>Wohnung</th>
                    <th>Etage</th>
                    <th>Zimmer</th>
                    <th>Wohnfläche</th>
                    <th>Balkon/Sitzplatz</th>
                    <th>Keller</th>
                    <th>Kaufpreis</th>
                    <th>Grundriss</th>

                  </tr>
                </thead>
                <tbody>
                  <tr onclick="" data-target="#carousel" data-slide-to="0">
                    <td>A1</td>
                    <td>EG</td>
                    <td>3,5</td>
                    <td>84,5 m²</td>
                    <td>16,2 m²</td>
                    <td>8 m²</td>
                    <td> CHF 630'000</td>
                    <td>
                      <a href="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" title="Grundriss A1" target="_blank">
                        <span class="fa fa-file-o"></span>                                  
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

      <!--Carousel-->
          <div class="col-md-12  col-lg-4">
            <div id="carousel" class="carousel" data-ride="carousel" style="margin-top:5%">
              <div class="carousel-inner">
                <div class="carousel-item active">
                    <img class="d-block w-100" src="https://via.placeholder.com/400x600" alt="A1">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="https://via.placeholder.com/400x600" alt="A1">
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="https://via.placeholder.com/400x600" alt="A2">
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
<!--carousel End-->



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

Answer 1

尝试将下载属性添加到<a></a> 像这样：

<a download target="_blank" href="/Bilder/GrundrissA2.pdf" title="GrundrissA2">Download</a>

表中的“下载”按钮与“轮播”冲突

1 个答案: