外部链接到选项卡，选项卡不变，Bootstrap 3.3.5-前端问题

Externally Linking to a Tab, Tab not changing, Bootstrap 3.3.5(外部链接到选项卡，选项卡不变，Bootstrap 3.3.5)

本文介绍了外部链接到选项卡，选项卡不变，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 的选项卡

非常相似:显示标签在引导程序 3 中带有带有 onclick 的外部链接

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

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 是我尝试实施解决方案的地方.目前这个来自引导链接到带有 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');
        })
    });

有人知道怎么帮忙吗?

推荐答案

在导入 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:

$ 未定义.

这应该永远是你最先看到的地方.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！