使用引导面板内的图像超链接到选项卡答案

【问题标题】：Using an image inside a bootstrap panel to hyperlink to a tab使用引导面板内的图像超链接到选项卡
【发布时间】：2020-10-01 15:54:11
【问题描述】：

我正在尝试使用引导程序选项卡内的图像超链接到不同的面板/选项卡。例如，在下面的代码中，我想超链接所有选项卡中的第一个图像以打开选项卡/面板品牌。这可能吗？到目前为止，我尝试使用面板 ID 的锚标记，但它不起作用。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link href='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css' rel='stylesheet' />
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container mt-5">


  <!--Section: Content-->
  <section class="dark-grey-text text-center">

    <style>
      .md-pills .nav-link.active {
        background-color: #3f51b5;
      }
    </style>
    
    <!-- Section heading -->
    <h3 class="font-weight-bold mb-4 pb-2">Our best projects</h3>
    <!-- Section description -->
    <p class="text-muted w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quas, eos officia maiores ipsam ipsum dolores reiciendis ad voluptas, animi obcaecati adipisci sapiente mollitia. </p>
    
      <!--First row-->
      <div class="row">
        
        <!--First column-->
        <div class="col-12">
          
          <!-- Nav tabs -->
          <ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">
            <li class="nav-item">
              <a class="nav-link active font-weight-bold" data-toggle="tab" href="#panel31" role="tab">ALL</a>
            </li>
            <li class="nav-item">
              <a class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">BRANDING</a>
            </li>
            <li class="nav-item">
              <a class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">PACKAGING</a>
            </li>
            <li class="nav-item">
              <a class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">PRINT DESIGN</a>
            </li>
          </ul>
          
        </div>
        <!--First column-->

    </div>
    <!--First row-->
    
    <!--Tab panels-->
    <div class="tab-content">

      <!--Panel 1-->
      <div class="tab-pane fade show in active" id="panel31" role="tabpanel">

        <!--First row-->
        <div class="row">
          
          <!--First column-->
          <div class="col-lg-4 col-md-12 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--First column-->
          
          <!--Second column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Second column-->
          
          <!--Third column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Third column-->
          
        </div>
        <!--First row-->

      </div>
      <!--Panel 1-->

      <!--Panel 2-->
      <div class="tab-pane fade" id="panel32" role="tabpanel">

        <!--First row-->
        <div class="row">
          
          <!--First column-->
          <div class="col-lg-4 col-md-12 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--First column-->
          
          <!--Second column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project5.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Second column-->
          
          <!--Third column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Third column-->
          
        </div>
        <!--First row-->

      </div>
      <!--Panel 2-->

      <!--Panel 3-->
      <div class="tab-pane fade" id="panel33" role="tabpanel">

        <!--First row-->
        <div class="row">
          
          <!--First column-->
          <div class="col-lg-4 col-md-12 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project3.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--First column-->
          
          <!--Second column-->
          <div class="col-lg-4 col-md-6">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project6.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Second column-->
          
          <!--Third column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Third column-->

        </div>
        <!--First row-->

      </div>
      <!--Panel 3-->

      <!--Panel 4-->
      <div class="tab-pane fade" id="panel34" role="tabpanel">

        <!--First row-->
        <div class="row">
          
          <!--First column-->
          <div class="col-lg-4 col-md-12 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--First column-->
          
          <!--Second column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project7.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Second column-->
          
          <!--Third column-->
          <div class="col-lg-4 col-md-6 mb-4">
            <!--Featured image-->
            <div class="view overlay zoom z-depth-2">
              <img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
            </div>
            <p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
              amet</p>
          </div>
          <!--Third column-->
          
        </div>
        <!--First row-->

      </div>
      <!--Panel 4-->

    </div>
    <!--Tab panels-->

    </section>
  
  
</div>

【问题讨论】：

标签： javascript html jquery css bootstrap-4

【解决方案1】：

基本上你需要用锚标签包裹你的特色图片，并在他们点击时，在导航标签内找到那些导航链接并触发他们的点击。

首先，为您希望这些图像触发点击的导航标签链接添加一个 ID。稍后我可以用锚标签包装图像并将它们的href 设置为javascript:document.getElementById().click(); 以触发导航链接的点击。

我尝试使用javascript:document.querySelector(a[href="#xxx"]).click();，但由于某种原因没有成功。

<!-- Nav tabs -->
<ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">
    <li class="nav-item">
        <a class="nav-link active font-weight-bold" 
          data-toggle="tab" href="#panel31" role="tab">
            ALL
        </a>
    </li>
    <li class="nav-item">
        <a id="branding-tab-link" 
          class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">
            BRANDING
        </a>
    </li>
    <li class="nav-item">
        <a id="packaging-tab-link" 
          class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">
            PACKAGING
        </a>
    </li>
    <li class="nav-item">
        <a id="print-design-tab-link" 
          class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">
            PRINT DESIGN
        </a>
    </li>
</ul>

剩下的就是用锚标签包装特色图片并设置它们的href：

<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
    <!--Featured image-->
    <a href="javascript:document.getElementById('branding-tab-link').click();">
        <div />
        <p />
    </a>
</div>
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
    <!--Featured image-->
    <a href="javascript:document.getElementById('packaging-tab-link').click();">
        <div />
        <p />
    </a>
</div>
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
    <!--Featured image-->
    <a href="javascript:document.getElementById('print-design-tab-link').click();">
        <div />
        <p />
    </a>
</div>

您还可以编写一些自定义 jQuery 并绑定图像点击以触发导航选项卡链接点击。我只是认为人们可能喜欢在不单独编写任何额外 JavaScript 的情况下实现这一点。

演示： https://jsfiddle.net/davidliang2008/q9ztuv4w/8/

点击后滑到顶部？

是的，这是可能的，但现在代替内联 JavaScript，编写一些自定义 JavaScript 来监听点击、触发导航链接并进行滚动会更有意义。

<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
    <!--Featured image-->
    <a data-nav-link-id="#branding-tab-link" href="#" class="reference-link">
        <div />
        <p />
    </a>
</div>
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
    <!--Featured image-->
    <a data-nav-link-id="#packaging-tab-link" href="#" class="reference-link">
        <div />
        <p />
    </a>
</div>
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
    <!--Featured image-->
    <a data-nav-link-id="#print-design-tab-link" href="#" class="reference-link">
        <div />
        <p />
    </a>
</div>

$(function() {
    $('a.reference-link').click(function(){
        // Get the nav link id from data attribute
        let navLinkId = $(this).data('nav-link-id');        
                
        // Simulate the click on nav link
        $(navLinkId).trigger('click');
        
        // Scroll the document body to the top
        $(body).scrollTop();
        
        // Disable original click event on the reference-link
        return false;
    });
});

演示： https://jsfiddle.net/davidliang2008/q9ztuv4w/20/

【讨论】：

有没有办法将默认行为设置为滚动到选项卡/面板的顶部？我注意到在移动设备上，当我滚动到所有选项卡的底部并单击图像时，它也会在底部打开新的选项卡/面板
@phantomdeveloper：您的意思是在单击“全部”选项卡上通向其他选项卡的图像后，您希望将其滚动回顶部？

【解决方案2】：

这是通过单击任何请求导航到选项卡的方式： https://jsfiddle.net/contactmikebray/Ldhpnqwg/

总结：

Bootstrap 使用 jQuery，因此您可以利用提供的 .click() 事件。监听所有图像元素的点击（可以用其他选择器替换）。单击图像时，支持选项卡显示事件。

<script type="text/javascript">
$(document).ready(function() {
  $("img").click(function() {
    $('.nav a[href="#panel32"]').tab('show');
  })
});
</script>

类似于： Changing active Bootstrap 3 tab using jQuery

【讨论】：

你应该把你的jsfiddle变成Stack Snippet。指向 fiddles、codepens 等 can break 的链接，以及它们的其他问题，这将使您的答案变得不那么有用。本地的 sn-p 永远不会消失，读者不必离开 SO 就能看到小提琴。