显示选项卡而不刷新整页

时间:2011-07-21 22:06:06

标签: php jquery

我的php页面中有以下代码。这是两个选项卡收件箱和sInbox。当用户点击它们时,它会刷新整个页面以转到其他选项卡。有没有办法制作这些标签,以便当用户点击其中一个标签时,没有页面刷新?在回答时请提供完整的代码示例,因为我是初学者。

 <ul id="topTabs">
        <li class="selected"><a href="acc/inbox"> Inbox </a></li>
    <li><a href="acc/sinbox"> sInbox </a></li>
 </ul>

4 个答案:

答案 0 :(得分:2)

最简单的方法之一是使用jQuery UI tabs。你可以找到一个很好的详细的初学者友好教程here

答案 1 :(得分:0)

我不会说你需要ajax这样做。只有在想要动态加载这些选项卡的内容时才需要Ajax。 实现你的tab切换你可以使用jQuery或简单的style-property“display:block”resp。 “显示:无”

答案 2 :(得分:0)

很难为您的问题提供一些代码(因为您需要更改页面结构)但作为提示,您需要使用jQuery ajax或php ajax更新面板(如果有类似的内容 - 我知道有一个用于刷新页面的某些部分(而不是整个)。

在早期的案例(jQuery)中,您的链接不会是重定向链接,并且会有一个与之关联的点击操作,请求使用ajax进行页面更新。

请参阅链接,了解使用jQuery使用ajax的示例。

答案 3 :(得分:0)

你可以使用ajax轻松地做到这一点:

        $(document).ready(function() {
            $("#topTabs li").click(function() {         
                var mode = $(this).find("a").attr("href");
                $.ajax({
                    url: 'contentprovider.php',
                    data: {mode:mode},
                    success: function(data){
                        $('#tab1').html(data);
                    }
                });
            }); 
        });

其中tab1是可以从contentprovider.php接收内容的元素的ID

有关jQuery Page的jQuery Ajax的更多信息。

GL 保罗布埃诺。