For these purposes, there are events and the window.open() function. The event is accordingly on click . The window.open(url, target, params) function window.open(url, target, params) takes two parameters, the new page url and 'target', this is the name of the new page, usually _blank and parameters for the new tab are used to open a new tab, their values can be viewed in MDN .
You can do this in two ways.
The first is to create a function that accepts a DOM object, in which you need to click on links in a new window, you will have to call this function for each block, which should have this behavior:
function inNewWindow(block) { block.on('click', 'a:not([href^="#"])', function(evt) { evt.preventDefault(); window.open(evt.target.href, '_blank'); }) }
- create an event handler for the wrapper itself (in our case it will be
#blok_1 and #blok_3 ). In case the links can appear inside the block dynamically. You can hang the event directly on the links, the case will not change; - Only links will be filtered by their selector:
a:not([href^="#"]) or a[href^="http://"] and a[href^="https://"] ; I want the transition to be based on the link, and not on the anchor. - in the handler, stop processing the default event so that the transition inside the page is not perfect (you need to look so that it does not damage the general logic of the site) and make the transition using
window.open() ; - accordingly work with this function like this:
inNewWindow(document.getElementById('blok_1')) .
The second is a little better, but you have to add an attribute to the elements.
- Let's add to the elements, which should be a transition to a new page, with a data attribute, for example,
data-newwindow ; - we will select all elements with such an attribute and hang on them the same handler as in the first variant.
- then you just have to add this to the script:
$('[data-newwindow]').on('click', function(evt) { evt.preventDefault(); window.open(evt.target.href, '_blank'); });
