引导程序选项卡在另一页上打开选项卡 [英] Bootstrap tabs opening tabs on another page

问题描述

我有一个页面上带有引导程序选项卡，它们链接到该页面上的正确内容区域.

I have a page that has bootstrap tabs on it and they are linking to the right content area on that page.

当您离开该页面时，我在顶部具有相同的选项卡，我希望在打开右侧选项卡的情况下将它们带回到上一页.

When you are lead away from that page I have the same tabs at the top that I would like to lead them back to the previous page with the right tab open.

这是我的标签在外部页面上的样子

This is what my tabs look like on the external page

 <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
  <li><a href="page.php#submitted">Submitted</a></li>
  <li class="active"><a href="page.php#approved" data-toggle="tab">Approved</a></li>
  <li><a href="page.php#rejected">Rejected</a></li>
  <li><a href="page.php#uploaded">Uploaded</a></li>
 </ul>

如您所见，我已经尝试链接到该页面并调出ID，该ID转到了正确的页面，但没有打开该选项卡.

As you can see I have tried linking to that page and calling out the id, which goes to the right page, but does not open that tab.

我也尝试过在jquery中弄乱它，但没有足够有效的显示方法.任何帮助将不胜感激！

I have also tried messing around with it in jquery, but nothing valid enough to show. Any help would be much appreciated!

另一页上的标签如下所示.只是基本的引导选项卡.

The tabs on the other page look like this. Just basic bootstrap tabbing.

<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
  <li class="active"><a href="#submitted" data-toggle="tab">Submitted</a></li>
  <li><a href="#approved" data-toggle="tab">Approved</a></li>
  <li><a href="#rejected" data-toggle="tab">Rejected</a></li>
  <li><a href="#uploaded" data-toggle="tab">Uploaded</a></li>
 </ul>
 <div id="my-tab-content" class="tab-content">
   <div class="tab-pane active" id="submitted">
   </div>
   <div class="tab-pane" id="approved">
   </div>
   <div class="tab-pane" id="rejected">
   </div>
   <div class="tab-pane" id="uploaded">
   </div>
  </div>

推荐答案

我最终做了更多的工作，并提出了选择确实选项卡并打开正确的内容面板的方法

I ended up working on this some more and came up with this that does select the right tab and open the right content panel

  //grabs the hash tag from the url
  var hash = window.location.hash;
  //checks whether or not the hash tag is set
  if (hash != "") {
    //removes all active classes from tabs
    $('#tabs li').each(function() {
      $(this).removeClass('active');
    });
    $('#my-tab-content div').each(function() {
      $(this).removeClass('active');
    });
    //this will add the active class on the hashtagged value
    var link = "";
    $('#tabs li').each(function() {
      link = $(this).find('a').attr('href');
      if (link == hash) {
        $(this).addClass('active');
      }
    });
    $('#my-tab-content div').each(function() {
      link = $(this).attr('id');
      if ('#'+link == hash) {
        $(this).addClass('active');
      }
    });
  }

谢谢您的追随者！ :)

Thank you willbeeler for the good start! :)

这篇关于引导程序选项卡在另一页上打开选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！