我的问题与这些问题非常相似,我尝试使用链接更改标签,但链接只会更改标签内容,而不会更改活动标签。
最相似:Bootstrap linking to a tab with an url
非常相似:show tab with external link with onclick in bootstrap 3
然而,我目前没有找到这些解决方案中的任何一个成功,也许是因为我有不同版本的bootstrap(或者因为我只是做了一些愚蠢的事情:我们会看到)
这是我的代码
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script2.js"></script>
<!-- For Dynamic Tabs-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<!--Begin Page Code-->
<ul class="nav nav-tabs" style="font-size: 20px">
<li class="active"><a data-toggle="tab" href="#tab1">Tab1</a></li>
<li><a data-toggle="tab" href="#tab2">Tab2</a></li>
<li><a data-toggle="tab" href="#tab3">Tab3</a></li>
<li><a data-toggle="tab" href="#tab4">Tab4</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active" >
<a href="#tab2" data-toggle="tab">Link to 2</a><br>
<a href="#tab3" data-toggle="tab">Link to 3</a><br>
<a href="#tab3" data-toggle="tab">Another Link to 3</a>
</div>
<div id="tab2" class="tab-pane fade">
<p> This is tab 2 </p>
</div>
<div id="tab3" class="tab-pane fade">
<p> This is tab 3 </p>
</div>
<div id="tab4" class="tab-pane fade">
<p> This is tab 4 </p>
</div>
</div>
<!--End Page Code-->
</body>
<html>
其中script2.js是我尝试实施解决方案的地方。目前来自Bootstrap linking to a tab with an url
的这一个 $(function () {
$('#tab1 a').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
})
});
任何人都知道如何提供帮助?
答案 0 :(得分:1)
在导入jQuery和bootstrap javascript文件之前,您要包含脚本文件。
由于您的代码需要这两个库,因此您需要将script2.js
移到其他脚本下面:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="script2.js"></script>
您的浏览器javascript控制台将包含以下行的消息:
$未定义。
这应该始终是你看的第一个地方。
正确使用时,您的代码可以正常运行:http://www.bootply.com/zP1y6wJIl1
答案 1 :(得分:0)
您可以使用window.location.href
来获取http://domain.com/index.html#tab1
(未经测试)但你可以把:
if (window.location.href.replace("#", "") == "tab1")
{
//change tab
}
答案 2 :(得分:0)
您可能希望将链接更改为:
<a href="javascript:$('a[href=#tab2]').click()" >Link to 2</a><br>
<a href="javascript:$('a[href=#tab3]').click()">Link to 3</a><br>
<a href="javascript:$('a[href=#tab4]').click()">Another Link to 3</a>