jquery - タブが動的に作成されたときにリロードを無効にする方法は?

Question

jQuery を使用して動的にタブを作成しますが、1 つのタブをクリックするたびに、ターゲット URL が再度リロードされます。再度リロードする場合を除き、リロード動作を無効にするにはどうすればよいですか? どうもありがとう。

Answer 1

使用event.preventDefault():

$('a.tab').click(function(event) {
    event.preventDefault(); // this is the key
    // your code here
});

編集：あなたのコメントについて - trueに設定cacheするだけです：

$(document).ready(function() {
    $apTabs = $("#apTabs").tabs({
        // ...
        cache: true, // this does the magic
        // ...
    });
});

Answer 2

$('#tabs').click(function(){
  // code
  return false;
});

Answer 3

参考のために私のコードを投稿してください：

<script>
    $(document).ready(function () {
        $apTabs = $("#apTabs").tabs({
            ajaxOptions: { async: true },
            cache: false,
            add: function (event, ui) {
                //immdeiately select the new created one
                $apTabs.tabs('select', '#' + ui.panel.id);
            }
        });
    });
</script>

<div id="apTabs">
    <ul>
        <li></li>
    </ul>
    <div></div>
</div>