標記 HTML 以允許右鍵單擊上下文菜單中的“在新選項卡中打開”選項的正確方法

Question

我四處搜索，但似乎沒有任何問題可以解決這個問題。

我有以下標記：

<li>
  <div class="box-brochure-slide" onclick="window.location='product.php?item=TEC%2FSR-888HP-SS';">
    <div class="boxInner-item">
            <div class="triangle-topright-cover"></div>
      <div class="triangle-topright-red"></div>
      <div class="label-limitedsets">LIMITED SETS</div>
      <img class="lazy" alt="" src="img/pixel.png" data-original="user/picture/TEC-SR-888HP-SS.jpg">
      <div class="ui content">
                <div class="productbrand">TECNO</div>
        <div class="productname">TECNO SR-888HP-SS 2 X HI POWER BURNERS, 1 X MED BURNER, <br>BATTERY AUTO IGNITION</div>
        <div class="price">
          <div class="specialprice"><div class="specialprice-name">Crazy Price</div><span class="pricecurrency">$</span>488<span class="pricecents">00</span></div>
          <div class="usualprice">U.P. $588.00</div>
        </div>
      </div>
    </div>
  </div>
</li>

但是，當我嘗試右鍵單擊網頁上的<li>時，我沒有在新選項卡中打開的選項。 這里的標記有什么問題？

編輯：我在一些資料中讀到<a>可以解決問題，但我不希望將整個<li>包裝在錨標記中。 有沒有辦法做到這一點？

注意：我不希望右鍵單擊以在新選項卡中打開。 我只是希望有一個選項可以在我右鍵單擊它時在新選項卡中打開。

Answer 1

雖然您不想使用該元素，但如果您將最上面的 div 替換為“a”，而保持類 ID 和 css 不變，您也將獲得與“在新標簽頁中打開”選項相同的外觀。

Answer 2

要首先右鍵單擊在新選項卡中打開，我們需要檢查鼠標單擊事件，然后打開鏈接。

<div id="open">open</div>

$('#open').mousedown(function(event) {
if(event.which == 3) {        //Right click event
   window.open('http://google.com','_newtab'); // To open in new tab
} else{
   alert('Please Right click to open');
}});

工作代碼筆

Answer 3

為此，您需要使用<a>標簽並將href屬性傳遞給標簽