logo标签列表

Bootstrap 标签页在另一页打开标签页

jquerytwitter-bootstrap
4
我有一个页面，上面有bootstrap标签页，并且它们链接到该页面上的正确内容区域。 当你从那个页面离开时，我在顶部有相同的标签页，我希望用正确的标签打开它们并将用户带回到之前的页面。 这是外部页面上我的标签页的样子。
 <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，这将转到正确的页面，但不会打开该选项卡。

我还尝试在jquery中进行操作，但没有有效的结果。任何帮助都将不胜感激！

编辑：

另一个页面上的选项卡如下所示。只是基本的Bootstrap选项卡。

<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>
你能展示每个页面的完整代码吗？谢谢！ - willbeeler
它们是非常长的页面，由于保密协议，我的公司不允许这样做。我只能分享一些可以轻松更改以保护它们的部分和片段。 - zazvorniki
这就是我的意思，我需要复制选项卡等内容... 我不需要实际的完整页面或其他什么。 - willbeeler
刚刚更新了另一个页面的标签页。 - zazvorniki
好的，谢谢。我会检查并尝试回答。 - willbeeler
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的好开端! :)
是的，我本来还想添加一些内容。很高兴看到你已经将它运行起来了。很抱歉我没有及时回来为你完成它。以后再聊。 - willbeeler
如果这段代码没有起作用，请检查一下你的代码。我也试了，但是我看到我的代码不是#tabs li而是#tabs ul。所以请根据你的代码进行修改。 - Penguin
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');
});
2
我认为这也可以。我测试过了，对我有效 :)
$(document).ready(function() {
   var hash = window.location.hash;
   hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});
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');
      }
    });
  }

});

编辑：顺便说一下，我需要感谢以下Stack Overflow问题：获取URL哈希位置，并在jQuery中使用它。那是我找到哈希变量的第一行代码。

这似乎突出了正确的选项卡，但是右侧的内容没有显示。它只显示默认内容。 - zazvorniki
好的，我知道了。请稍等。 - willbeeler
我正在处理这个问题。但是我会在一个小时内回来修复它并提交给您。谢谢。 - willbeeler
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>

外部链接使用的网址：

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

在我的情况下，URL看起来像这样：

 <a href="/IndexPage#accountTab">Account</a>
我可以问一下这个与发布的答案有什么不同吗？我刚刚将它们并排放在一起看了一下，但是没有看出区别... - zazvorniki
如果您检查div id ="homeTab"的类，则会显示class="tab-pane fade in active"，其中"in active"表示活动状态。如果您删除"in"，则在我的情况下该div的内容不会显示，或者如果您使用$(this).addClass('active');，那么在从其他页面单击选项卡后也不会显示内容，仅会显示导航栏。 - Singh Cloud
以上代码在我的情况下完美运行。我已经从您的帖子中复制粘贴了代码，但在我的情况下并没有起作用，所以我进行了调试并根据我的工作情况进行了修改。 - Singh Cloud
所以真正改变的只是id名称和不同的html，除此之外jQuery保持不变了？ - zazvorniki
在jQuery中更改以下行：$(this).removeClass('active'); 更改为 $(this).removeClass('in active'); 并且 $(this).addClass('active'); 更改为 $(this).addClass('in active'); 并将导航栏内容部分的类更改为 <div class="tab-pane fade in active"。 - Singh Cloud
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接