显示选项卡而不刷新整个页面 - Show tab without refreshing whole page

Show tab without refreshing whole page

本文关键字：刷新选项显示 | 更新日期: 2023-09-27

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

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

最简单的方法之一是使用jQuery UI选项卡。你可以在这里找到一个非常详细的初学者友好的教程。

我不会说您需要ajax来做这件事。只有在需要动态加载这些选项卡的内容时才需要Ajax。要实现选项卡切换，您可以使用jQuery或简单的样式属性"display:block" resp。"显示:没有。"

这是很难提供一些代码为您的问题(因为你需要改变你的页面结构)，但作为一个提示，你需要使用jQuery ajax或php ajax更新面板(如果有这样的东西-我知道有一个为ASP.NET)刷新页面的某些部分(而不是整个)。

在前面的情况下(jQuery)，你的链接将不会是重定向链接，将有一个点击操作关联到他们使用ajax请求页面更新。

使用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 Ajax的信息，请访问jQuery Page。

gl保罗布埃诺。