4

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

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

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

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

5 回答 5

4

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

  //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的良好开端！:)

于 2013-10-03T18:14:06.080 回答
4

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

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

   if (hash != "")
       $('#tabs a[href="' + hash + '"]').tab('show');
   else
       $('#tabs a:first').tab('show');
});
于 2014-01-29T02:38:28.250 回答
2

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

$(document).ready(function() {
   var hash = window.location.hash;
   hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});
于 2014-04-14T17:06:11.293 回答
0

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

});

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

于 2013-10-03T16:22:35.470 回答
0

对我有用的一点修改：

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

Url 用于外部链接： 

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

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

 <a href="/IndexPage#accountTab">Account</a>
于 2014-11-06T08:15:55.043 回答