外部链接到选项卡，选项卡不更改，Bootstrap 3.3.5

问题描述：

我的问题与这些问题非常相似，我试图使用链接来更改标签，但链接仅更改标签内容，而不是活动标签。

My issue is very similar to these questions, where I am trying to use a link to change tabs, but the link only changes the tab content, but not the active tab.

大部分类似：引导链接到带有url的选项卡

漂亮相似：显示选项卡与外部链接onclick in bootstrap 3

然而，我目前没有找到成功这些解决方案之一，也许是因为我有一个不同的引导版本（或者也许是因为我只是在做一些愚蠢的事情：我们会看到）

However I am currently not finding success with either of these solutions, perhaps because I have a different version of bootstrap (or maybe because I'm just doing something dumb :p we'll see)

这是我的代码

    <!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链接到带有url的标签

Where script2.js is where I am trying to implement solutions. Currently this one from Bootstrap linking to a tab with an url

    $(function () {
        $('#tab1 a').click(function (e) {
            e.preventDefault();
            $('a[href="' + $(this).attr('href') + '"]').tab('show');
        })
    });

任何人都知道如何提供帮助？

Anyone know how to help?

答

在导入jQuery和引导javascript文件之前，您正在包含脚本文件。

You are including your script file before you import jQuery and the bootstrap javascript files.

由于您的代码需要这两个库，您需要将您的 script2.js 移动到其他脚本下面：

Since your code requires both of these libraries, you need to move your script2.js underneath your other scripts:

<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控制台将包含以下消息：

Your browsers javascript console will contain a message along the lines of:

$未定义。

$ is not defined.

这应该始终是您的第一位看看。

this should always be the first place you look.

正确使用时，您的代码工作正常： http： //www.bootply.com/zP1y6wJIl1

Your code works fine when used correctly: http://www.bootply.com/zP1y6wJIl1

外部链接到选项卡，选项卡不更改，Bootstrap 3.3.5

相关推荐