Using an image inside a bootstrap panel to hyperlink to a tab

Question

I'm trying to use an image inside a tab on bootstrap to hyperlink into a different panel/tab. For instance, in the code below, I want to hyperlink the first image in the all tab to open the tab/panel Branding. Is this possible? So far I tried to use an anchor tag of the panel Id but it's not working.

<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>

David Liang · Accepted Answer · 2020-10-07T22:31:38.863

Basically you need to wrap your featured images with anchor tags, and on their clicks, find those nav links inside the nav tabs and trigger their clicks.

First, add an ID for those nav tab links you want those images to trigger the clicks for. Later I can wrap the images with anchor tags and set their href to javascript:document.getElementById().click(); to trigger nav link's clicks.

I've tried to use javascript:document.querySelector(a[href="#xxx"]).click(); but for some reason that didn't work out.

<!-- 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>

And then the rest is just to wrap featured images with anchor tags and set their hrefs:

<!--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>

You can also write some custom jQuerys and bind image clicks to trigger nav tab link clicks. I just thought people might like achieving this without writing any additional JavaScripts separately.

demo: https://jsfiddle.net/davidliang2008/q9ztuv4w/8/

Scoll to the top after click?

Yea it's possible, but now instead of inline JavaScript, it makes more sense to write some custom JavaScripts to listen to the clicks, triggers nav link and do the scrolling.

<!--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;
    });
});

demo: https://jsfiddle.net/davidliang2008/q9ztuv4w/20/

is there a way to set the default behavior to scroll to the top of the tab/panel? I'm noticing on mobile, when I scroll to the bottom on the all tab and click on an image, it opens the new tab/panel at the bottom too — phantomdeveloper, Oct 07 '20 at 15:24
@phantomdeveloper: you mean after clicking the images on the "All" tab that lead to other tabs, you want it to be scrolled back to the top? — David Liang, Oct 07 '20 at 16:32

Mike Bray · Answer 2 · 2020-10-01T18:03:34.507

0

This is the way to navigate to a tab by clicking any as requested: https://jsfiddle.net/contactmikebray/Ldhpnqwg/

Summary:

Bootstrap uses jQuery so you can take advantage of the .click() event that is provided. Listen for an click on all image elements (can be replaced with other selectors). When an image is clicked, prop the tab show event.

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

Similar to: Changing active Bootstrap 3 tab using jQuery

edited Oct 01 '20 at 18:03

answered Oct 01 '20 at 16:25

Mike Bray

9
2

You should make your jsfiddle into a [Stack Snippet](https://meta.stackoverflow.com/questions/358992). Links to fiddles, codepens, etc. [can break](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/), among other problems with them, which would make your answer rather less useful. A local snippet will never go away, and the readers don't have to leave SO to see the fiddle. – Stephen P Oct 01 '20 at 21:43

Using an image inside a bootstrap panel to hyperlink to a tab

2 Answers2

Scoll to the top after click?