Externally Linking to a Tab, Tab not changing, Boo

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.

Most Similar: Bootstrap linking to a tab with an url

Pretty Similar: show tab with external link with 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)

Here's my code

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

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?

回答1:

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

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>

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

$ is not defined.

this should always be the first place you look.

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

回答2:

You could use window.location.href to get something like http://domain.com/index.html#tab1

(not tested) but you could put:

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

回答3:

You many want to change your links to:

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