Twitter Bootstrap选项卡：转到页面加载的特定选项卡 [英] Twitter Bootstrap Tabs: Go to Specific Tab on Page load

问题描述

在我的主页上，有一个链接到用户的显示页面

 < a id =event_shortcuthref = http：// localhost：3000 / users / 1＃event_tab>显示事件&l​​t; / a> 
  

在用户显示中，我使用了引导选项卡，

 < ul id =user_show_tabs> 
< li> 
< a href =＃profile_tab>个人资料< / a> 
< / li> 
< li> 
< a href =＃event_tab>事件< / a> 
< / li> 
< li class =active> 
< a href =＃account_tab>帐户< / a> 
< / li> 
< / ul> 
  

当我点击链接时，应该进入用户的显示页面，事件标签应该位于FOUCS。
所以在js中，我喜欢这个，

$ $ $（＃event_shortcut）。live（click，函数（事件）{
event.preventDefault（）;
window.location = $（this）.attr（href）;
$（'＃user_show_tabs a [href =＃ event_tab]'）。tab（'show'）;
}）;

此js代码将用户重定向到显示页面，但事件选项卡未设置焦点。
我不知道我错过了什么。帮助我！

解决方案

当您重定向到另一个页面时，选项卡列表正在刷新。您需要将逻辑放在当前页面的选项卡上只有 class =active，或者您需要使用选项卡-content 方法，并将所有页面加载到单独的内容div中，因此这些标签实际上不会离开页面，而只是更改哪些< div> 。



查看Bootstrap的Javascript部分以获取有关如何执行此操作的更多信息。 http://twitter.github.com/bootstrap/javascript.html#tabs


On my home page, there is a link to user's show page

<a id="event_shortcut" href="http://localhost:3000/users/1#event_tab">show events</a>

and in user's show, I used bootstrap tab,

<ul id="user_show_tabs">
    <li >
        <a href="#profile_tab">Profile</a>
    </li>
    <li>
        <a href="#event_tab">Events</a>
    </li>
    <li class="active">
        <a href="#account_tab">Account</a>
    </li>
</ul>

When I click on the link it should go to the user's show page and the event tab should be in foucs. So in js I did like this,

$("#event_shortcut").live("click", function(event){
    event.preventDefault(); 
    window.location = $(this).attr("href"); 
    $('#user_show_tabs a[href="#event_tab"]').tab('show');
});

this js code redirects the user to the show page but the event tab is not set focus. I don't know what I am missing. Help me!

解决方案

When you redirect to another page, the tab list is getting refreshed. You either need to put in logic to only have the class="active" on the tab for the current page, or you need to use the tab-content method and have all of the pages load in separate content divs, so the tabs don't actually leave the page they just change which <div> is being displayed.

Check out the Javascript section of Bootstrap to get more info on how to do this. http://twitter.github.com/bootstrap/javascript.html#tabs

这篇关于Twitter Bootstrap选项卡：转到页面加载的特定选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！