引导选项卡在另一页上打开选项卡

Question

我的页面上有引导选项卡，它们链接到该页面上的正确内容区域。

当您离开该页面时，我在顶部有相同的选项卡，我想在右侧选项卡打开的情况下将它们引导回上一页。

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

 <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 转到正确的页面，但没有打开该选项卡。

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

编辑：

另一个页面上的标签看起来像这样。只是基本的引导选项卡。

<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>

Answer 1

我最终在这方面做了更多工作，并想出了这个选择正确的标签并打开正确的内容面板

  //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');
      }
    });
  }

感谢 willbeeler 的良好开端！ :)

Answer 2

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

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

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

Answer 3

我认为这也可以。我对其进行了测试，它对我有用:)

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

Answer 4

好的，我对此进行了测试，它对我有用。在调用 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');
      }
    });
  }

});

编辑：顺便说一句，我需要为以下堆栈溢出问题提供一些支持：Getting URL hash location, and using it in jQuery 这就是我找到哈希变量的第一行。

Answer 5

对我有用的一点修改：

<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>

标签部分：

<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>

标签内容部分：

<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>

外部链接中使用的网址：

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

在我的情况下，网址看起来像：

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