title: How do I make a div link open in a new tab Javascript onClick="window.location
body: <p>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 . </p>
  
  <p>Assuming I have to change something in the onClick.... ?</p>
  
  <p>Here is code: </p>
  
  <pre><code>&lt;div id="insidefooter"&gt;
  &lt;ul&gt;
      &lt;li&gt;
          &lt;div id="facebook" style="cursor:pointer;" onClick="window.location='https://www.facebook.com';"&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div id="youtube" style="cursor:pointer;" onClick="window.location='https://www.youtube.com';"&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div id="twitter" style="cursor:pointer;" onClick="window.location='https://twitter.com/';"&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <p>Here is CSS:</p>
  
  <pre><code>#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;
  </code></pre>
  
  <p>I left out some CSS code to make it simpler, but here is a demo <a href="http://fiddle.jshell.net/3Bsyd/2/" rel="noreferrer">http://fiddle.jshell.net/3Bsyd/2/</a></p>
  
  <p>Thank you!</p>