Twitter bootstrap 页面重新加载时的引导选项卡持久性,但不是如何执行

Twitter bootstrap 页面重新加载时的引导选项卡持久性,但不是如何执行,twitter-bootstrap,tabs,Twitter Bootstrap,Tabs,我读过几篇关于如何使引导中的选项卡在重新加载页面后保持其状态的文章。我想出了一个完全不同的方法,这是针对我的情况,所以我不是问你怎么做 在我的页面末尾,我只有这段代码,我正在使用细枝模板在必要时注入vales。如果你不知道,那就是{{tab_index}}部分的全部内容。我只是在页面加载时输入要打开的选项卡的索引号 总之,我的页面末尾有一个小片段: $(document).ready(function(){ $('.nav-tabs li:eq({{ tab_index }}) a').t

我读过几篇关于如何使引导中的选项卡在重新加载页面后保持其状态的文章。我想出了一个完全不同的方法,这是针对我的情况,所以我不是问你怎么做

在我的页面末尾,我只有这段代码,我正在使用细枝模板在必要时注入vales。如果你不知道,那就是{{tab_index}}部分的全部内容。我只是在页面加载时输入要打开的选项卡的索引号

总之,我的页面末尾有一个小片段:

$(document).ready(function(){
   $('.nav-tabs li:eq({{ tab_index }}) a').tab('show');
});
很简单,除了当页面最初加载时,它位于第一个选项卡上,然后快速更改为我告诉它显示的选项卡。这就产生了一种看起来相当愚蠢的“闪烁”。有没有办法切换到选项卡而不闪烁?在加载页面时,但在页面显示之前,是否可以切换到相应的选项卡

编辑: 好的,这里有一些代码向您展示它是如何工作的:

首先,我使用MVC结构和细枝模板作为我的视图。因此,在我的路由器表中,我定义了一个类似于[Controller]/[id]/[Action]的路由。id可以是任何整数。因此,路由器将控制器、id和操作解析为数组中的不同值。控制器值是要实例化的类的名称,操作是要在新控制器对象中调用的方法。由于任何原因,id可以是任何整数,并且可以从路由器创建的阵列访问

现在,我页面上的每个选项卡都将是一个不同的表单。因此,我们的想法是,在每个表单的操作中,URL将类似于[Controller]/[id]/[action]。现在我有两种形式,如下所示:

<form name="personal_form" id="personal_form" method="post" action="{{ domain }}/members/profile/0/personal" class="form" role="form">
tab_索引的默认值为0,因此如果数组中没有id,则tab_索引将保持为0

完成后,我将渲染我的细枝模板:

View::renderTemplate('Members/profile.twig', ['member' => $this->member,
                              'domain' => Config::DOMAIN,
                              'tab_index' => $this->tab_index]);
重要的一点是我将tab_索引号作为tab_索引传递给模板

最后,在模板中,我使用JQuery根据其索引号显示打开的选项卡:

$(document).ready(function(){
   $('.nav-tabs li:eq({{ tab_index }}) a').tab('show');
});
然后告诉引导选项卡显示相应的选项卡

问题是,适当的选项卡最初不是打开的选项卡。加载页面时,第一个选项卡打开,然后切换到相应的选项卡。这会在从一个选项卡切换到另一个选项卡时导致闪烁


这能避免吗?对不起,我知道那有很多话要说。

哎呀,我是个白痴!要使用引导选项卡,请将默认选项卡的内容区域设置为活动,并将默认选项卡本身设置为活动。然后,当您打开网页时,该选项卡和内容在页面加载时打开

因此,在我的例子中,默认值在页面加载时打开,然后切换到我告诉它打开的那个。加载页面时可以看到页面切换,这不是我想要的


我只是将活动类从选项卡上移除,并删除与该选项卡关联的内容。影响是加载页面时没有默认页面已打开。因此,没有从默认选项卡切换到我想要的选项卡。它一开始就向我想要的那个打开

您是否可以共享html,这可能是您的问题的症结所在。把它修好会容易些当然给我一分钟,但可能需要一些解释。
View::renderTemplate('Members/profile.twig', ['member' => $this->member,
                              'domain' => Config::DOMAIN,
                              'tab_index' => $this->tab_index]);
$(document).ready(function(){
   $('.nav-tabs li:eq({{ tab_index }}) a').tab('show');
});