1

これは恥ずかしいほど簡単だと思いますが、空白があります。Twitter Bootstrap のタブを実装しました。すべて正常に動作しますが、以下の ** ... ** で強調表示した Web ページへのリンクをコーディングする方法がわかりません。それらをタグの間に配置すると、タブをクリックした後にリンクをクリックする必要がありますが、ページをすぐに開くだけにしたいのです。

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

私の賢い友人がこれを提案しましたが、うまくいくようです。

<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 に答える
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 に答える