Utilizing a visual element within a bootstrap panel to link to a specific tab

Is it possible to use an image inside a tab on Bootstrap as a hyperlink to open a different panel/tab? For example, I would like the first image in the all tab to link to the Branding tab. I have attempted using an anchor tag with the panel ID but it does not seem to be 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-->
    
    ... (rest of the code) ...
  
</div>

javascripthtmljquerycssbootstrap-4

Answer №1

To make your featured images trigger navigation tab clicks, you should wrap the images with anchor tags and set their href attributes to execute JavaScript functions that simulate the nav link clicks.

Start by assigning IDs to the nav tab links you want to be triggered by the images. Then wrap the images with anchor tags and use 

href="javascript:document.getElementById().click();"
to trigger the corresponding nav link's click events.

Although attempts were made using 

javascript:document.querySelector(a[href="#xxx"]).click();
, it did not yield the desired results for some reason.

... additional content omitted for brevity ...

Answer №2

To easily navigate to a tab by clicking on any element, follow these steps: https://jsfiddle.net/contactmikebray/Ldhpnqwg/

Overview:

Bootstrap utilizes jQuery, allowing you to utilize the .click() event. Simply listen for a click on specified elements (in this case, images) and trigger the show event for the desired tab.

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

For more information, check out: Changing active Bootstrap 3 tab using jQuery

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with focus transition animation not functioning properly when unfocusing an HTML input field

Hey there! I'm currently working on styling a basic input, and I'm having trouble getting the unfocus animation to work properly. Can anyone help me figure out what's going wrong? I've tried commenting out the all: unset line and expl ...

htmlcssvue.jscss-transitions

Node.js (npm) is still unable to locate python despite setting %PYTHON% beforehand

Trying to get Node.js to work is proving to be more challenging than expected! Despite having two versions of Python on my computer, it seems that Node.js only works with the older version, 2.7. When I encountered an error, it prompted me to set the path ...

javascriptpythonnode.jsnpm

Is there a way to display the output of jQuery in an input box rather than a span?

I need to display the result of this function in an input box instead of a span tag because I plan to utilize the result in the following form. function checkChange(){ $.ajax({ url: "ordercalculate.php", data: $('form').seria ...

javascriptjqueryhtmlcalculated-field

Recursive array generation

Given an array 'featureList', the goal is to create a new array 'newArray' based on a specific ID. For example, for ID 5, the newArray would be ['MotherBoard','Antenna','Receiver'], where Receiver correspon ...

javascripttypescript

Chrome fails to apply CSS to Polymer 2 web component

The implementation of my web component in Polymer v2 is causing a styling issue specifically in Google Chrome. Despite including a CSS file that defines a style called n-action-button, the styling is not being applied to the content of the web component in ...

javascriptcssgoogle-chromepolymerpolymer-2.x

Obtain the contents of a div element from a specified URL

Having trouble with my side menu and hide/show div functionality. When I click the back button, the content of the previously viewed div does not appear. How can I fix this issue? I've looked into using jQuery pushstate but it's still confusing t ...

jqueryajax

Tips for Customizing the StrongLoop LoopBack Explorer CSS

Our team is currently utilizing Strongloop's LoopBack framework for our REST APIs and we are looking to customize the CSS of the LoopBack Explorer. Unfortunately, it seems unclear which CSS files are being employed (LoopBack vs Swagger) and their exac ...

cssuser-interfaceloopbackjsstrongloop

When the onclick event is triggered, the return value will execute after the onclient

After my onclientclick event finishes, I am trying to run my onclick event. However, regardless of whether my checkbox is selected or not, the program keeps prompting me to "Please select at least one to delete." Can anyone help me figure out why this is h ...

javascriptasp.net

How can we improve our vertical division method?

Looking for a more efficient way to create a vertical divider between two divs. I want the divider to be centered between the "why choose" and "gallery" sections. Here is an example of what I'm trying to achieve. I've attempted the following co ...

htmlcss

An object that holds CSS attributes

I am working on a function that takes an element from the page and adds CSS styles to its attribute. The argument passed to this function should ideally be an object with keys like height, minWidth, flexDirection, and so on. function addStyle (el: HTMLElem ...

csstypescript

What is the reason for jQuery's inability to recognize ":not(#menu *)" in a selector?

I have created a Javascript-based navigation bar that is triggered by clicks instead of hover for better mobile usability. I have made sure to keep the HTML, CSS, and JavaScript code as simple as possible. To ensure that clicking anywhere outside the menu ...

javascriptjqueryevent-bubbling

Is it possible to save the current state of an execution in JavaScript and pick up where you left off

Is there a way to accomplish this task? I am interested in developing a JavaScript application that has the ability to "pause" and then "resume" execution from a specific point, similar to a checkpoint system. For example: //code.js var abc = 13; checkpoi ...

javascripthtmlexecutioncheckpoint

Using jQuery to replace the value of a button with a variable string that has been concatenated

I am facing a dilemma with a button on my webpage. The value displayed on the button is a combination of variables and strings, like so: $('#btn1').attr('value','question'+currid+'ans1').button('refresh'); ...

javascriptjqueryvariablesbuttonjquery-mobile

Using ng-if within ng-repeat in an AngularJs table structure

Hey there, I'm currently trying to utilize ng-if within ng-repeat. My condition is if {{dev[2]}} == "". If this condition is met, I want to display <td>Non Valide</td>; otherwise, I simply want to display the data inside 'dev'. I ...

javascriptangularjs

A guide on embedding text onto the bottom of an image in Material-UI GridList using Reactjs

I'm currently developing a Mern-stack application and using Material-UI for the frontend. My GridList is functioning correctly, but I want to position my description text at the bottom of the image rather than in front of it. However, when I try to a ...

cssreactjsflexboxmaterial-uicodesandbox

When do jQuery.when callbacks trigger when every Deferred is no longer 'unresolved' (resolved or rejected)?

When you pass multiple Deferred objects to jQuery.when, a new "master" Deferred object is returned. This master Deferred object keeps track of the overall state of all the Deferreds it received. Here's how the method works: The master Deferred reso ...

javascriptjqueryrestjquery-deferred

The bookdown feature of tufte_html_book, when combined with the csl style, struggles to properly position citations

bookdown::tufte_html_book does not place citations in the margin with csl notes. Here is an example: bookdown::render_book(input = "index.rmd", output_format = "bookdown::tufte_html_book") The csl used comes from: https://raw.githu ...

htmlbookdowncsltufte

Secure Access with Skype Bot Verification

Recently, I managed to set up a NodeJS bot to synchronize messages between Discord and Skype chats. Although I am relatively new to Javascript and completely unfamiliar with NodeJS, the existence of a framework called Spype has been quite beneficial. The i ...

javascriptnode.jsskype-botsmicrosoft-skype-bot

symfony submit form without sending request

I'm trying to make a request without using a submit button, only by selecting an option. So far, I've attempted to achieve this using JavaScript but haven't had any success. Here's my form code: $form = $this->createFormBuilder() ...

javascriptphpformssymfony

Unable to fix gap at the base of the jumbotron

Utilizing the jumbo tron to display a hero image of psd, there seems to be a gap at the bottom that I have tried to adjust with margin-bottom: 0px without success. .jumbotron { background-image: url(image/background.png); background-repeat: no- ...

htmlcsstwitter-bootstrap