使用 AJAX 在同一页面中加载 jQuery UI 选项卡

Question

我正在使用 CakePhp(2.5.4) 和 jQuery UI 选项卡(jquery-ui.1.8.20) 在我的视图页面上通过 ajax 创建选项卡和填充内容。

我的问题是当我浏览选项卡时，所有新内容都放在同一页面中（一个在另一个之下）。

我怎样才能让每个内容出现在自己的标签下？

这是我的脚本：

<script>
    var st_id = <?php echo $data1['Town']['Municipality'];?>;
    //console.log(st_id);
    $(function(){
        $("#mytabs").tabs({
            ajaxOptions : {
                type :"POST",
                data:{postData:st_id},
                error:function(xhr,status,index,anchor){
                    $(anchor.hash).html("Could not load tab");
                },
                success:function(response){
                    console.log(response);
                }
            }
        });
    });
</script>

还有我的 div 结构

<div id='mytabs'>
    <ul>
        <li><a href='#content_1' title='content_1'>Tab1</a></li>
        <li><?php echo $this->Html->link('Tab2',array('controller' => 'Towns','action' => 'viewTown'),array('title' => 'content_2')); ?></li>
        <li><?php echo $this->Html->link('Accounts Records',array('controller' => 'Towns','action' => 'viewAccounts'),array('title' => 'content_3'));?></li>
        <li><?php echo $this->Html->link('Population',array('controller' => 'Towns','action' => 'viewPeople'),array('title' => 'content_4')); ?></li>
    </ul>
<div id='content_2'></div>
<div id='content_3'></div>
<div id='content_4'></div>
</div>

Answer 1

可能有些div标签没有关闭，请确保所有标签都适当关闭。