Externally Linking to a Tab, Tab not changing, Bootstrap 3.3.5

Question

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

Answer 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

Answer 2

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>

Answer 3

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
}