Utilizing jQuery to turn an entire <div> into a clickable link with the target set

Question

Utilizing jQuery to turn an entire <div> into a clickable link with the target set

I'm attempting to make an entire Div clickable and have it open a new tab. I've managed to make the div clickable and direct the user to a new link with the following code:

$(document).ready(function(){
        $('.wish-list').click(function(){
          location.href = 'https://link.com'
    })
  });

While this successfully redirects the current page to the specified link, I'm looking to achieve the same result but have it open in a new tab.

Any help would be greatly appreciated. Thank you!

javascript jquery html css hyperlink

Answer 1

Answer №1

To open a new window in JavaScript, you can utilize the window.open method:

window.open("http://link.com", "_blank");

Answer 2

To open a new window in JavaScript, you can utilize the window.open method:

window.open("http://link.com", "_blank");

Answer 3

Answer №2

Here is a helpful tip:

Open a new window with this code snippet:

window.open('url', '_blank');

Answer 4

Here is a helpful tip:

Open a new window with this code snippet:

window.open('url', '_blank');

Answer 5

Answer №3

Discover window.open function on Mozilla Developer Network

Consider using window.open instead of location.href for improved functionality

Invoke window.open with parameters strUrl, strWindowName, and strWindowFeatures as needed:
window.open(strUrl, strWindowName[, strWindowFeatures]);

Here's an example usage:

Open a new window with Google's homepage in it:
window.open('http://www.google.com','_blank');

Answer 6

Discover window.open function on Mozilla Developer Network

Consider using window.open instead of location.href for improved functionality

Invoke window.open with parameters strUrl, strWindowName, and strWindowFeatures as needed:
window.open(strUrl, strWindowName[, strWindowFeatures]);

Here's an example usage:

Open a new window with Google's homepage in it:
window.open('http://www.google.com','_blank');

Answer 7

Answer №4

To utilize window.open(), you will need to use the following code snippet. Unfortunately, this code will not function properly in the Stack Overflow snippet environment due to sandboxing. However, you can view it in action by clicking here:

$(function(){
   $('.link').on("click", function(){
     window.open(this.dataset.url);
   });
});

.link {
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link" data-URL="http://espn.com">ESPN</div>

Answer 8

To utilize window.open(), you will need to use the following code snippet. Unfortunately, this code will not function properly in the Stack Overflow snippet environment due to sandboxing. However, you can view it in action by clicking here:

$(function(){
   $('.link').on("click", function(){
     window.open(this.dataset.url);
   });
});

.link {
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link" data-URL="http://espn.com">ESPN</div>

Answer 9

Answer №5

give it a shot

 window.open('newURL', '_blank');

Answer 10

give it a shot

 window.open('newURL', '_blank');

Utilizing jQuery to turn an entire <div> into a clickable link with the target set

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Displaying JSON data with dynamic color changes in an HTML table: A comprehensive guide

Make sure to pause and wait for a click before diverting your

How to retrieve user data based on ID using Angular SDK

The webmethod does not respond to the AJAX function

Ways to retrieve data from response instead of subscription JSON in Angular 2/4

Display navigation bar upon touch or lift

My DIV elements are not responding to the widths I set for them. What could be the issue?

Struggling to get collapsible feature functioning on website

Trouble with displaying images in Bootstrap 4 cards

Utilizing the Flatpickr's onChange event to dynamically update the end date

The seamless flow of web design

Is it required to double click checkboxes to uncheck them?

Achieving dynamic placement of Vue components

Retrieve an image using screen resolution parameters [using only HTML]

Scrolling effect on Bootstrap tabs activated when clicked

Difficulty encountered while using React.js map function to access specific JSON data

When swiping right with Swiper.js, the slides are jumping by all, skipping the following slide, but the left swipe functions correctly

The process of loading a unique home page based on the screen size of the device

Are the Bootstrap columns arranged in a vertical stack instead of side by side?

Error Alert: UnhandledPromiseRejectionWarning in Async Series Causes Concern