外部链接到选项卡，选项卡不变，Bootstrap 3.3.5答案

【问题标题】：Externally Linking to a Tab, Tab not changing, Bootstrap 3.3.5外部链接到选项卡，选项卡不变，Bootstrap 3.3.5
【发布时间】：2016-06-16 19:11:00
【问题描述】：

我的问题与这些问题非常相似，我尝试使用链接更改选项卡，但链接仅更改选项卡内容，而不更改活动选项卡。

最相似：Bootstrap linking to a tab with an url

非常相似：show tab with external link with onclick in bootstrap 3

但是，我目前在这两种解决方案中都没有成功，可能是因为我有不同版本的引导程序（或者可能是因为我只是在做一些愚蠢的事情：p 我们会看到）

这是我的代码

    <!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');
        })
    });

有人知道怎么帮忙吗？

【问题讨论】：

标签： javascript jquery html twitter-bootstrap tabs

【解决方案1】：

在导入 jQuery 和引导 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

【讨论】：

【解决方案2】：

您可以使用window.location.href 获得类似http://domain.com/index.html#tab1 的内容

（未测试）但您可以输入：

if (window.location.href.replace("#", "") == "tab1")
{
  //change tab
}

【讨论】：

【解决方案3】：

许多人想将链接更改为：

<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>

【讨论】：