Question

我确信这很容易让人感到尴尬，但我有空白。我已经实现了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>

帮助表示赞赏。

Answer 1

让我们先解决问题。由于http://google.com，您无法.load {）same origin policy。查看this question以解决问题。

一旦有了想要加载的内容，就可以使用以下代码：

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

这很简单，当你点击标签时，拉出“href”并将其用作选择器以获取标签内容ID。

Answer 2

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

<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选项卡 - 如何在没有第二次点击的情况下跳转到新网页

2 个答案: