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

});

编辑：顺便说一下，我需要给下面的Stack溢出问题提供一些道具：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>

在我的案例中，Url看起来像：

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

Bootstrap选项卡在另一页上打开选项卡

5 个答案: