3

I'm trying to have items in a dropdown list open in new tab using the javascript function below. As of now, a drop-down list is displayed from where each item will open only in the same window.

Any help would be much appreciated!

HTML

<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Button Name</button>
<div id="myDropdown" class="dropdown-content">
  <a href="">Choice A</a>
  <a href="">Choice B/a>
 </div>
</div>

JS

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Judah
  • 37
  • 5
  • Duplicate: [How to open link in new tab on html?](https://stackoverflow.com/questions/17711146/how-to-open-link-in-new-tab-on-html) –  Dec 22 '20 at 23:29

2 Answers2

0

Add the target attribute with value _blank to your a tags.

Like this:

<a href="https://google.com" target="_blank">Google</a>
Ricki-BumbleDev
  • 1,698
  • 1
  • 16
  • 18
  • 1
    Please don't post answers to duplicates, and please [don't use, recommend or link to w3schools](https://meta.stackoverflow.com/questions/280478/why-not-w3schools-com). –  Dec 22 '20 at 23:31
0

You don't need JavaScript at all. Just set the target attribute to _blank in your <a> tags like so:

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
.show{
  display:block !important;
}
#myDropdown{
  display:none;
}
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Button Name</button>
<div id="myDropdown" class="dropdown-content">
  <a href="https://choice.a" target="_blank">Choice A</a>
  <a href="https://choice.b" target="_blank">Choice B</a>
</div>
</div>
Spectric
  • 30,714
  • 6
  • 20
  • 43
  • Please don't post answers to duplicates –  Dec 22 '20 at 23:31
  • Thanks for the quick reply and sorry for the duplicate question. I guess I wanted to see if there was a way to do it through the function using the .open method or something but this solves my problem nevertheless. – Judah Dec 22 '20 at 23:46