twitter-bootstrap Bootstrap 选项卡在另一页上打开选项卡

Bootstrap tabs opening tabs on another page

提问by zazvorniki

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>

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.

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

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

我也试过在 jquery 中处理它，但没有足够有效的显示。任何帮助将非常感激！

edit:

编辑：

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>

回答by zazvorniki

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! :)

感谢 willbeeler 的良好开端！:)

回答by user3247038

This could be greatly simplified by leveraging tab('show').

这可以通过利用 tab('show') 来大大简化。

$(document).ready(function() {
   var hash = window.location.hash;

   if (hash != "")
       $('#tabs a[href="' + hash + '"]').tab('show');
   else
       $('#tabs a:first').tab('show');
});

回答by Dimitar

i think this will work as well. i test it and it is working for me :)

我认为这也会起作用。我测试了它，它对我有用:)

$(document).ready(function() {
   var hash = window.location.hash;
   hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

回答by Singh Cloud

A Little Modification that works for me:

对我有用的一点修改：

<script>
$( document ).ready(function() {
//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');
});
$('#myTabContent div').each(function() {
  $(this).removeClass('in 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');
  }
});
$('#myTabContent div').each(function() {

  link = $(this).attr('id');
  if ('#'+link == hash) {

    $(this).addClass('in active');
  }
});
}
});
</script>

Tab Portion:

标签部分：

<ul id="tabs" class="nav navbar-nav">
   <li class="active"><a data-toggle="tab" href="#homeTab">Home</a></li>
   <li><a data-toggle="tab" href="#accountTab">Accounts</a></li>
</ul>

Tab Content Portion:

标签内容部分：

<div id="myTabContent" class="tab-content">
   <div class="tab-pane fade in active" id="homeTab">
   </div>
   <div class="tab-pane fade" id="accountTab">
   </div>
</div>

Url Used in external Link:

外部链接中使用的网址：

<a href="/YourPageName#YourTabName">Account</<a>

In my Case Url looks like:

在我的案例中，网址如下所示：

 <a href="/IndexPage#accountTab">Account</a>

回答by willbeeler

OK, I tested this out and it worked for me. Add the following code some place after you call jQuery. This should go on page.php (your primary page that the external page links to). Let me know if this helps.

好的，我对此进行了测试，它对我有用。在调用 jQuery 后的某处添加以下代码。这应该在 page.php 上（外部页面链接到的主页面）。如果这有帮助，请告诉我。

$( document ).ready(function() {
  //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');
    });
    //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');
      }
    });
  }

});

EDIT: By the way, I need to give some props to the following Stack overflow question: Getting URL hash location, and using it in jQueryThat's where I got that first line to find the hash variable.

编辑：顺便说一句，我需要为以下堆栈溢出问题提供一些支持：获取 URL 哈希位置，并在 jQuery 中使用它这就是我找到第一行以查找哈希变量的地方。