Bootstrap 3标签没有通过ajax加载内容

Question

我正在使用引导选项卡，所有内容都通过远程URL使用Ajax加载到选项卡中。但就我而言，我无法按预期工作。我用Google搜索并尝试了不同的方式，但没有一个成功。

这是我到目前为止所尝试的内容。

HTML：

<div class="container">
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation">
                <a href="showTab1.do" data-target="#test_1" id="tab1" aria-controls="test_1" role="tab" data-toggle="tab">Tab-1</a>
            </li>
            <li role="presentation">
                <a href="showTab2.do" data-target="#test_2" id="tab2" aria-controls="test_2" role="tab" data-toggle="tab">Tab-2</a>
            </li>
            <li role="presentation">
                <a href="showTab3.do" data-target="#test_3" id="tab3" aria-controls="test_3" role="tab" data-toggle="tab">Tab-3</a>
            </li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane" id="test_1"></div>
            <div role="tabpanel" class="tab-pane" id="test_2"></div>
            <div role="tabpanel" class="tab-pane" id="test_3"></div> 
        </div>
    </div>
</div>

jQuery的：

<script>
        $(document).ready(function() {
            $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
              var url = $(this).attr("href"); // the remote url for content
              var target = $(this).data("target"); // the target pane
              var tab = $(this); // this tab

              // ajax load from data-url
              $(target).load(url,function(result){      
                tab.tab('show');
              });
            });

            // initially activate the first tab..
            $('#tab1').tab('show');
        });
  </script>

上面的代码仅适用于First Tab，即Tab-1，但是当我点击Tab-2时，我可以看到Ajax调用成功，但它不会在tab中加载内容并重定向到空白页面。我没有得到我做错的地方。如果我做错了，请指出我。

注意：我已关注http://www.codeply.com/go/xZfTnAtKUM此链接。