跳转到特定的标签从引导的导航，选项卡选择其他选项卡

我使用的是引导的nav-tabs具有以下设置：跳转到特定的标签从引导的导航，选项卡选择其他选项卡

<ul class="nav nav-tabs"> 
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li> 
    <li><a href="#profile" data-toggle="tab">Profile</a></li> 
</ul> 
<div id="tabContent" class="tab-content"> 
    <div class="tab-pane active in" id="home"> 
    <form id="tab"> 
     <label>Name:</label> 
     <input type="text" value="fooBar" class="input-xlarge"> 
    </form> 
    </div> 
    <div class="tab-pane fade" id="profile"> 
    <form id="tab2"> 
     <a href="#home">Home</a> 
    </form> 
    </div> 
</div>

正如你所看到的，我有我的profile标签中的链接，该链接到第一个标签。点击锚点确实会更改URL栏中的URL，但它不会跳转到特定的选项卡。

然后我注意到，它通常是不可能的链接直接在标签，所以我增加从Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink下面的代码：

// Javascript to enable link to tab 
var url = document.location.toString(); 
if (url.match('#')) { 
    $('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ; 
} 

// Change hash for page-reload 
$('.nav-tabs a').on('shown', function (e) { 
    window.location.hash = e.target.hash; 
})

现在我可以从别的地方链接到一个特定的标签，但不，如果我在导航栏所在的同一页面上。重装后，页面会跳转到想要的选项卡，所以我想我可能只是强制重新加载页面，从Javascript: How to truly reload a site with an anchor tag?解决方案：

window.location.reload(true);

然而，这每一次我在选项卡上单击时间结束了在重载，另外它仍然没有加载home标签，当点击锚时。

因此，如何从另一个选项卡跳到给定的id？

来源

2013-03-12 cherrun

你可能被你提到的其他答案置于错误的脚上......从同一页面内改变标签（无论你是否在另一个标签中）是相当简单的：你可以为此，请使用基本引导程序tab navigation Javascript。

首先改变你的HTML有点：添加一个id你<ul class="nav nav-tabs" id="myTab">..然后将链接添加到您的第二个选项卡：

<div class="tab-pane fade" id="profile"> 
    <form id="tab2"> 
    <a href="#" id="gotohome">Jump to home tab (this works)</a> 
...

，并添加您的文件准备以下几点：

$('#gotohome').click(function() { 
    $('#myTab a[href="#home"]').tab('show'); 
});

工作例如jsFiddle。

来源

2013-03-12 15:27:21 Marijn

给出的答案

$('#myTab a[href="#home"]').tab('show');

也可以用来做一个JavaScript软件跳转到一个特定的标签。假设你想通过URL跳转到一个特定的标签开始：

http://myDomain/myApp#tabSomewhere

你可以想象一下就可以了（你需要做一些额外的编码）。假设你的第一页上tabHome（你做出积极与“活动”类当您尝试使用使用你的JavaScript删除从tabHome活动类返回到该页面。

$('li').removeClass('active');

来源

2017-10-06 11:16:33 Harm

跳转到特定的标签从引导的导航，选项卡选择其他选项卡

回答

相关问题