让按钮在另一个窗口中打开网页。

huangapple go评论107阅读模式
英文:

Make a button open a webpage in another window

问题

你可以尝试将锚链接放在按钮内部,像这样:

  1. <li class="card-action-item">
  2. <a target="_blank" rel="noopener noreferrer" href="producttest.html">
  3. <button class="card-action-btn" aria-labelledby="card-label-1">
  4. <ion-icon name="cart-outline"></ion-icon>
  5. </button>
  6. </a>
  7. <div class="card-action-tooltip" id="card-label-1">Open In New Tab</div>
  8. </li>

这将使按钮内的文本成为可点击的链接,打开一个新标签页,并且rel属性帮助确保安全性。

英文:

This is the code I have:

  1. <ul class="card-action-list">
  2. <li class="card-action-item">
  3. <button class="card-action-btn" aria-labelledby="card-label-1">
  4. <ion-icon name="cart-outline"></ion-icon>
  5. </button>
  6. <div class="card-action-tooltip" id="card-label-1">Open In New Tab</div>
  7. </li>
  8. <li class="card-action-item">
  9. <button class="card-action-btn" aria-labelledby="card-label-1">
  10. <ion-icon name="cart-outline"></ion-icon>
  11. </button>
  12. <div class="card-action-tooltip" id="card-label-2">Open In New Window</div>
  13. </li>
  14. <li class="card-action-item">
  15. <button class="card-action-btn" aria-labelledby="card-label-2">
  16. <ion-icon name="share-social-outline"></ion-icon>
  17. </button>
  18. <div class="card-action-tooltip" id="card-label-3">Share Link</div>
  19. </li>
  20. </ul>

I want to put an anchor into the button kinda like this:

  1. <a target="_blank" and rel="noopener noreferrer" href="producttest.html"></a>

When I put it into the button thought it does not work. Sorry if this a simple fix, I am new to Webdevelopment 让按钮在另一个窗口中打开网页。

答案1

得分: 0

如果您将锚点放在按钮内部(下面是第一个代码),您将不会获得按钮点击的视觉效果,但会获得点击锚点时的效果。

  1. <button>
  2. <a href="producttest.html"></a>
  3. </button>

这可能是您想要的:

  1. <button onclick="window.open('producttest.html');"></button>
英文:

If you put the anchor inside the button (first code below), you won't get the visual effect of a button click, but that one from when you click an anchor.

  1. &lt;button&gt;
  2. &lt;a href=&quot;producttest.html&quot;&gt;&lt;/a&gt;
  3. &lt;/button&gt;

<br></br>
This might be what you want:

  1. &lt;button onclick=&quot;window.open(&#39;producttest.html&#39;);&quot;&lt;/button&gt;

huangapple
  • 本文由 发表于 2023年4月10日 19:11:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/75976565.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定