jQuery tabs and using different ajax content based on querystring
<p>Tech used: PHP 5.3 and jQuery 1.5</p>

<p>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 <code>&lt;div id="link1"&gt;My content&lt;/div&gt;</code> and using the below jQuery code:</p>

<pre><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;
});
</code></pre>

<p>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...</p>

<p>For example the user is on the original page</p>

<p><a href="http://www.domain.com/search-results/" rel="nofollow">http://www.domain.com/search-results/</a></p>

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

<p><a href="http://www.domain.com/search-results/?tab=map" rel="nofollow">http://www.domain.com/search-results/?tab=map</a></p>

<p>However I am getting the map content from</p>

<p><a href="http://www.domain.com/ajax/search/map.php" rel="nofollow">http://www.domain.com/ajax/search/map.php</a></p>

<p>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?</p>

<p><strong>Update</strong></p>

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

<p>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:</p>

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

<p>I can then use jQUery to get the url to grab content from using:</p>

<pre><code> var ajaxUrl = $(this).data("url");
</code></pre>

<p>Then load this into my tab content by:</p>

<pre><code> $('#tab-content-block').load(ajaxUrl);
</code></pre>

<p>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 <code>data-query</code> if I use PHP to json-encode it.</p>
