动态标签 - 链接仅在单击时有效

Question

所以我尝试了本教程，标签工作完美无缺：

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h

但问题如下：

我可以单击选项卡并导航，但如果我直接使用链接到特定选项卡，它将打开第一个（默认）选项卡。

示例：

在访问链接http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tabs_dynamic&stacked=h#menu2时，附加＃menu2不会打开分配了ID＃menu2的标签

谢谢！

Answer 1

也许你应该试试这个：

$( document ).ready( function( ) {
  var hash = document.location.hash;
  if( hash.length > 1 ) {
    $( "a[href='" + hash + "']" ).trigger( "click" );
  }
} );

它检查文档打开时是否存在哈希，然后单击正确的链接

如果您将其添加到＆＃34; <script></script>＆＃34;在＆＃34; tryit＆＃34;中，点击＆＃34;查看结果＆＃34;，您会看到它发生。 例如：

Answer 2

那是因为bootstraps菜单通过javascript工作，而不是通过实际的锚点。

单击选项卡时，会激活javascript函数，在选项卡和内容窗格上设置active类，这将导致选项卡突出显示，内容为display: block而不是display: none了（这是默认值）。

生成页面时，您必须从URL中读取锚点，然后根据该类别设置active类。

<强>增加： 或者，您可以使用@VirginieLGB建议的javascript片段，但每次加载页面时您都会有一个短暂的过渡时刻。特别是当你有一个更大的页面需要更长的时间来加载，你可能需要等待一点文件准备好＆＃34;准备好＆＃34;所以功能开始工作。在该时间跨度内，第一个选项卡将在转换并显示第二个选项卡之前显示。

Answer 3

我认为你问的是： 单击选项卡时，需要打开新页面并显示活动选项卡。

css表示活动标签具有类.active 您需要将.active类附加到新打开的页面上的相关选项卡。