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

本文介绍了引导程序选项卡在另一页上打开选项卡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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>

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

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.

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

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

另一页上的标签如下所示.只是基本的引导选项卡.

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>

推荐答案

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

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