Show tab without refreshing whole page

I have following code in my php page. These are two tabs Inbox and sInbox. When user clicks on them it refreshes whole page to go to other tab. Is there a way to make these tabs so that when user click on one of the tab there is no page refre开发者_JAVA技巧sh? When answering please provide full code example as i am a beginner.

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

One of the simplest ways would be using jQuery UI tabs. You can find a nice detailed beginner-friendly tutorial here.

I wouldn't say that you need ajax to do this. Ajax is only needed when you want to load content of these tabs dynamically. Do realize your tab-switching you can use jQuery or simply the style-property "display:block" resp. "display:none".

It's very hard to provide some code for your question (because you need to change your page structure) but as a hint, you need to use jQuery ajax or php ajax update panel (if there is something like this - I know there is one for ASP.NET) to refresh some parts of your page (instead of whole).

In the earlier case (jQuery) your links will not be redirection links and will have a click action associated to them which requests for page update using ajax.

see the link for examples of using ajax using jQuery.

You can do it easly using 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);
                    }
                });
            }); 
        });

Where tab1 is the ID of the element wich may receive the content from contentprovider.php

More info on jQuery Ajax at jQuery Page.

gl Paulo Bueno.