Twitter Bootstrap tabs - how to jump to new webpage without second click

Question

I am sure this is embarrassing easy but I'm having a blank. I have implemented Twitter Bootstrap's tabs. Everything works fine, but I cannot work out how to code the links to webpages that I have highlighted by the ** ... ** below. If I place them between tags, I have to click a link after I have clicked the tab, whereas I want it to just open the page immediately.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"    type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<meta charset=utf-8 />
</head>
<body>

    <ul id="myTab" class="nav nav-tabs">
      <li class="active"><a href="#google" data-toggle="tab">Google</a></li>
      <li><a href="#bing" data-toggle="tab">Bing</a></li>
      <li><a href="#AOL" data-toggle="tab">AOL</a></li>

      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">More choices <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="#yahoo" data-toggle="tab">Yahoo</a></li>
          <li><a href="#cnn" data-toggle="tab">CNN</a></li>
          <li><a href="#weather" data-toggle="tab">Weather</a></li> 
        </ul>
      </li>
    </ul>


<div id="myTabContent" class="tab-content">
 <div id="google" class="tab-pane fade">
  ** http://www.google.com **
 </div>

 <div id="bing" class="tab-pane fade">
  ** http://www.bing.com **
 </div>

 <div id="AOL" class="tab-pane fade">
  ** http://www.aol.com ** 
 </div> 

 <div id="yahoo" class="tab-pane fade">
   ** http://www.yahoo.com **
 </div>

 <div id="cnn" class="tab-pane fade">
  ** http://www.cnn.com **
 </div>

 <div id="weather" class="tab-pane fade">
   ** http://www.weather.com **
 </div>
 </div


 </body>
 </html>

I tried adding JQuery code, but no joy

 <script>
 $('#google').load('http://www.google.com');
 $('#bing').load('http://www.google.com');
 $('#AOL').load('http://www.google.com'); 
</script>

Help appreciated.

Can you clarify what you are looking to do? Do you want your window to actually open google.com when you click on said tab? Or do you want to load google.com within your tab environment when you click on said tab? — Darrrrrren, Nov 07 '12 at 18:54
Hi Darren. Yes. all I want to do is open www.google.com in this case. At a later date I want to call a php file but thought I'd practice on this first — Jeremy, Nov 09 '12 at 18:31

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

Let's get the first thing out of the way. You can't .load() http://google.com due to the same origin policy. Check out this question to get around that.

Once you have what you want load, you could use the following code:

$('#myTab a').click(function(){
    var id = $(this).attr("href");
    $(id).load("example-url.php");
});

It's pretty straight forward, when you click on a tab, pull the "href" and use it as a selector to get the tab content id.

edited May 23 '17 at 12:12

Community

1
1

answered Nov 07 '12 at 19:05

amosrivera

26,114
9
67
76

Hi Amos. Thanks for your suggestion, but doesn't it circumnavigate Twitter Bootstrap's class="tab-content" structure? Would you mind posting a more complete example of what you are suggesting because I'm having trouble seeing how the two come together. Thks. – Jeremy Nov 09 '12 at 18:45

score 0 · Answer 2 · answered Nov 10 '12 at 12:57

A smart friend of mine suggested this, which seems to work.

<div id="myTabContent" class="tab-content">
<div id="google" class="tab-pane fade">
 <iframe src="http://www.google.com/custom" style="border: 0; width: 100%; height: 100%">  </iframe>
</div>

<div id="bing" class="tab-pane fade">
<iframe src="http://www.bing.com" style="border: 0; width: 100%; height: 100%"></iframe>
</div>

<div id="AOL" class="tab-pane fade">
<iframe src="http://www.aol.com" style="border: 0; width: 100%; height: 100%"></iframe>
</div> 

<div id="yahoo" class="tab-pane fade">
<iframe src="http://www.yahoo.com" style="border: 0; width: 100%; height: 100%"></iframe>
</div>

<div id="cnn" class="tab-pane fade">
<iframe src="http://www.cnn.com" style="border: 0; width: 100%; height: 100%"></iframe>
</div>

<div id="weather" class="tab-pane fade">
<iframe src="http://www.weather.com" style="border: 0; width: 100%; height: 100%"></iframe>
</div>

</div>

Twitter Bootstrap tabs - how to jump to new webpage without second click

2 Answers2