Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make a div link open in a new tab Javascript onClick="window.location

Tags:

People also ask

How can you open a link in a new tab browser window in JavaScript?

To open a new tab, we have to use _blank in the second parameter of the window. open() method. The return value of window. open() is a reference to the newly created window or tab or null if it failed.

How do I make a link open in a new tab instead of a new window?

Open in a new tab To open a link in a new tab, click the link by pressing down your middle mouse button, or right-click the link and select Open link in New Tab.

How do I open a div in a new tab?

You can do like that : function newWindow_method_1() { var wi = window. open(); var html = $('. mainservice-page').

How do you click on a link and have it open in a new window?

You can hold the Shift key and left-click a link to force opening in a new window.


I created a range of social media buttons which when the mouse hovers it switches to a different image (giving it a highlight effect). The images work as I want them to, however, I can't seem to figure out how to load the page into a new tab/screen. I need to implement the equivalent of .

Assuming I have to change something in the onClick.... ?

Here is code:

<div id="insidefooter">
<ul>
    <li>
        <div id="facebook" style="cursor:pointer;" onClick="window.location='https://www.facebook.com';"></div>
    </li>
    <li>
        <div id="youtube" style="cursor:pointer;" onClick="window.location='https://www.youtube.com';"></div>
    </li>
    <li>
        <div id="twitter" style="cursor:pointer;" onClick="window.location='https://twitter.com/';"></div>
    </li>
</ul>
</div>

Here is CSS:

#facebook {
height: 40px;
position: relative;
top: 0px;
left: 260px;
width: 40px;
background-image:url(/img/index/footer/facebook-button.jpg);
}

#facebook:hover {
height: 40px;
width: 40px;
background-image:url(/img/index/footer/facebook-button2.jpg);
top: 0;
left: 260px;
width: 40px;
position: relative;
}

#youtube {
height: 40px;
position: relative;
top: -62px;
left: 360px;
width: 40px;
background-image:url(/img/index/footer/youtube-button.jpg);
}

#youtube:hover {
height: 40px;
width: 40px;
background-image:url(/img/index/footer/youtube-button2.jpg);
top: -62px;
left: 360px;
width: 40px;
position: relative;

I left out some CSS code to make it simpler, but here is a demo http://fiddle.jshell.net/3Bsyd/2/

Thank you!