Making CSS Tabs with jQuery and ajax

Question

as mentioned above I tried to make Ajax Tabs with the provided jQuery .ajax() function.

That works all very well, my problem is only that the value in the href attribute from the anchor is in the url and i dont know how to call my ajax function with the #tabname in the url. (my intention is, that if somebody stores the link of the site, he comes back to right that tab and not to the first tab ).

And I'm sorry no I don't want to use jQuery-UI because if i would use it, it would be only for that one problem and I think thats not worth it.

For understanding:

my tab(or anchor) is something like: <a id="main" href='#main'>Mainpage</a>

my jquery looks like following:

$('#main').click(function(){
            loadtab("main.php");
        });

        function loadTab(pageUrl) 
        {
            //load the content into #tabcontent
            $.ajax( 
            { 
                url: pageUrl, 
                cache: false, 
                success: function(message) 
                {
                    $('#tabcontent').empty().append(message).hide().fadeIn('slow');
                } 
            });

EDIT:

if somebody likes the loadTab method, here is a link from were i have taken it from (not mine) http://jetlogs.org/2008/03/17/jquery-ajax-tabs/

EDIT 2:

ok, i solved it like this:

    //click the first tab, so that there will be shown anything
    //tabs is an array of my link ids
    $('#'+tabs[0]).click();

    //if there is a given hash, click the matching
    if(window.location.hash+"" != ""){

        var hash = window.location.hash.substr(1)+'';
        if(jQuery.inArray(hash, tabs)){
            $('#'+hash).click();
        }
    }

lorefnon · Accepted Answer · 2011-07-14 23:01:56Z

1

For directing the user to a particular tab based on the hashtag he has used in the url entered , you have to use a client side routing solution. Calling $.ajax with some special parameter, as you are probably guessing does not solve this requirement. I recommend you look at https://github.com/mtrpcic/pathjs . This is a jquery based routing solution, which effectively maps particular hashtags in urls to particular functions. This tutorial : http://stjhimy.com/posts/22-riding-the-hash-bang-with-pathjs-and-ajax-easy-twitter-like-urls might be helpful in demonstrating the use of javascript routing.

answered Jul 14, 2011 at 23:01

lorefnon

13.1k8 gold badges66 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Making CSS Tabs with jQuery and ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related