Question

我的php页面中的bootstrap选项卡有问题。我在 index.php

上使用了两个这样的标签

<ul class="nav nav-tabs" id="myTab">
  <li class="active"> <a data-toggle="tab" href="#s1"><span class="hidden-mobile hidden-tablet">FIRST TAB</span></a> </li>
  <li> <a data-toggle="tab" href="#s2"><span class="hidden-mobile hidden-tablet">SECOND TAB</span></a> </li>
</ul>

并且标签内容如下

 <div class="tab-pane fade" id="s1">Tabe 1 content
    <ul>
       <li>s1_link_A</li>
       <li>s1_link_B</li>
    </ul>
 </div>
 <div class="tab-pane fade" id="s2">Tabe 2 content
    <ul>
       <li>s2_link_A</li>
       <li>s2_link_B</li>
    </ul>
 </div>

我的第一个问题是：

现在我希望当用户在<li>s1_link_A</li>或<li>s2_link_A</li>上发生碰撞时，第一个标签必须处于活动状态并显示内容。就像我们点击FIRST TAB时一样。

类似当用户在<li>s1_link_B</li>或<li>s2_link_B</li>上碰撞时，第二个标签必须处于活动状态并显示内容。就像我们点击SECOND TAB时一样。

我的第二个问题是：

我希望使用链接

从其他页面 index_2.php 打开两个TABS

<ul>
  <li><a href=""><u>Link to be First Tab</u></a></li>
  <li><a href=""><u>Link to be Second Tab</u></a></li>
</ul>

当用户点击Link First Tab时，必须转到index.php并且FIRST TAB必须激活。同样的事情当用户点击Link Second Tab时，它必须转到index.php并且SECOND TAB必须激活。

请帮助解决上述两个问题！

感谢。

Answer 1

我找到了第一个问题的解决方案只需添加

<script>
$("a[data-tab-destination]").on('click', function() {
    var tab = $(this).attr('data-tab-destination');
    $("#"+tab).click();
});
</script>

编辑

<ul class="nav nav-tabs" id="myTab">
   <li class="active"> <a data-toggle="tab" href="#s1" id="tab-1"><span class="hidden-mobile hidden-     tablet">FIRST TAB</span></a> </li>
   <li> <a data-toggle="tab" href="#s2"  id="tab-1"><span class="hidden-mobile hidden-tablet">SECOND TAB</span></a> </li>
</ul>


<!------------AND------------------>

<div class="tab-pane fade" id="s1">Tabe 1 content
<ul>
   <li>s1_link_A</li>
   <li><a data-tab-destination="tab-2" >s1_link_B</a></li>
</ul>
</div>
<div class="tab-pane fade" id="s2">Tabe 2 content
<ul>
   <li><a data-tab-destination="tab-1" >s2_link_A</a></li>
   <li>s2_link_B</li>
</ul>
</div>

第二个问题的解决方案

只需添加 inddex.php

<script>
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
} 

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})
</script>

在index_2.php中编辑

<ul>
  <li><a href="index.php#s1"><u>Link to be First Tab</u></a></li>
  <li><a href="index.php#s2"><u>Link to be Second Tab</u></a></li>
</ul>

完成

如何从标签上的其他页面链接？

1 个答案: