如何使用Bootstrap选项卡指向另一个网站？

Posted 2023-01-31

我尝试了以下代码，

<ul class="nav nav-tabs">
   <li class="nav-item" id="web1Tab"><a class="nav-link active" data-toggle="tab" id="w1" href="link_to_website_1">Website1</a></li>
   <li class="nav-item" id="web2Tab"><a class="nav-link" data-toggle="tab" id="w2" href="link_to_website_2">Website2</a></li>
</ul>

它的确像我期望的那样，但是href不起作用。另一方面，如果我删除了data-toggle="tab"部分，则href可以正常工作，但active选项卡不会更改。我猜想，href在这种情况下仅支持内部链接？我不确定。代码看起来很简单，但是我无法解决。

答案

您可以尝试用href包围整个列表项吗？

<ul class="nav nav-tabs">
  <a style="display:block" href="your_url1_here">
    <li class="nav-item" id="web1Tab">Website1</li>
  </a>

  <a style="display:block" href="your_url2_here">
    <li class="nav-item" id="web2Tab">Website2</li>
  </a>
</ul>