Question

我正在使用带有jQuery UI选项卡的CakePhp（2.5.4）（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标签并未关闭，请确保所有标签都已正确关闭。

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

1 个答案: