jQuery tabs and using different ajax content based on querystring

Tech used: PHP 5.3 and jQuery 1.5

I am working on some tabs on a page to load new content into a div when clicked. Using the below code I can get it to work giving the tabs a link of "#link1" and creating the content in the page wrapped in the equivalent ID <div id="link1">My content</div> and using the below jQuery code:

 $("#searchBox ul.tabset li a").click(function() {

    $("#searchBox ul.tabset li a").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab

    var activeTab = $(this).attr("href"); //开发者_如何学编程Find the href attribute value to identify the active tab + content
    $("#searchBox .tab-content").css({display: "none"});
            $(activeTab).css({display: "block"});
            return false;
});

However I now want instead of having all the content on the page to load content in from other pages using Ajax, this shouldn't be a problem using jQuerys load function, however in order to gracefully fallback for non javascript users I want instead of the href for the pages to call the page that generates the content html, to append a querystring to the current page, I can then use this for non javascript users to show the relevant content...

For example the user is on the original page

http://www.domain.com/search-results/

If they click the tab to show results on a map I would want the href to be:

http://www.domain.com/search-results/?tab=map

However I am getting the map content from

http://www.domain.com/ajax/search/map.php

Can anyone recommend the best way to achieve this? Is the best way just to do a whole load of checks to see what tabs have been clicked and manually run a list of what page to load etc using if statements. Would this cause a big performance penalty? Or is there somewhere else in the I can put an alternative link?

Update

Been researching lots of things and suddenly thought the new data attribute in HTML 5 should be able to help me here.

As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. So I made my links look like the following:

 <li><a href="/search/?tab=1" data-url="/ajax/search/list.php" data-query="jsonstring" class="tab active">List View</a></li>
 <li><a href="/search/?tab=2" data-url="/ajax/search/map.php" data-query="jsonstring" class="tab">Map View</a></li>

I can then use jQUery to get the url to grab content from using:

 var ajaxUrl = $(this).data("url");

Then load this into my tab content by:

 $('#tab-content-block').load(ajaxUrl);

and although I am yet to test I presume I can encode any data I need to send to the ajax page to pass through search parameters in data-query if I use PHP to json-encode it.

Not sure if I know what you're trying to achieve... is it something like this?

$(activeTab).load('http://www.domain.com/search-results/?tab=' + activeTab.substr(1));