1

我确信这很容易令人尴尬，但我有一个空白。我已经实现了 Twitter Bootstrap 的标签。一切正常，但我无法弄清楚如何对下面的 ** ... ** 突出显示的网页链接进行编码。如果我将它们放在标签之间，我必须在单击选项卡后单击一个链接，而我希望它立即打开页面。

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

我尝试添加 JQuery 代码，但没有乐趣

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

帮助表示赞赏。

4

2 回答 2

0

让我们把第一件事排除在外。由于相同的来源政策，您不能 .load() http://google.com。看看这个问题来解决这个问题。

一旦你有了你想要加载的东西，你可以使用下面的代码：

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

这很简单，当您单击选项卡时，拉动“href”并将其用作选择器以获取选项卡内容 ID。

于 2012-11-07T19:05:05.040 回答
0

我的一个聪明的朋友建议这样做，这似乎有效。

<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>
于 2012-11-10T12:57:00.743 回答