jquery - jQuery を使用したタブ コンテンツの読み込み

Question

ビューを切り替えるタブのある Web ページがあります。プレビュー

問題は、ページの読み込み時に、すべてのタブからすべての情報が読み込まれることです。

ユーザーがタブを切り替えたときにタブの内容をロードしたい。

現在のコード:

<div class="row-fluid">
    <div class="span12">
        <div class="tabbable">
            <ul class="nav nav-tabs" id="Tabs">
                <li class="active">
                <a href="#tab1-1" data-toggle="tab">TEXT1</a>
                </li>
                <li>
                <a href="#tab2-1" data-toggle="tab">TEXT2</a>
                </li>
                <li>
                <a href="#tab3-1" data-toggle="tab">TEXT3</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab1-1">
                    <img src="http://colmenarviejo.info/IMG/BANNER_300X300.jpg" style="width: 300px; height: 300px;" data-src="holder.js/300x200" alt="300x200" class="img-polaroid">
                </div>
                <div class="tab-pane" id="tab2-1">
                    <iframe width="100%" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q=40.614474,-111.926758&amp;num=1&amp;t=m&amp;ie=UTF8&amp;ll=40.609782,-111.936264&amp;spn=0.156382,0.205307&amp;z=11&amp;output=embed">
                    </iframe>
                </div>
                <div class="tab-pane" id="tab3-1">
                    <dl class="dl-horizontal">
                        <dt>City</dt>
                        <dd>Av. 1</dd>
                        <dt>Tel</dt>
                        <dd>(000)123456789</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

Javascript (プラグイン):

$('a[data-toggle="tab"]').on('shown', function (e) {
    e.target // activated tab
    e.relatedTarget // previous tab
})

ユーザーがタブをクリックしたときに、コンテンツの読み込みを開始するにはどうすればよいですか?