jQuery选项卡，并基于querystring使用不同的ajax内容

使用的技术：PHP5.3和jQuery 1.5

我正在处理页面上的一些选项卡，以便在单击时将新内容加载到div中。使用下面的代码，我可以让它为选项卡提供一个“#link1”链接，并在页面中创建包含在等效ID

My content

中的内容，并使用下面的jQuery代码：

 $("#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;
});

但是，我现在不想让页面上的所有内容都使用Ajax从其他页面加载内容，使用jQuerys加载函数应该不会有问题，但是为了方便非javascript用户，我想让页面调用生成内容html的页面，而不是href，要将查询字符串附加到当前页面，我可以对非javascript用户使用它来显示相关内容

例如，用户位于原始页面上

如果他们单击选项卡在地图上显示结果，我希望href为：

但是，我从中获取地图内容

有人能推荐实现这一目标的最佳方法吗？这是一种最好的方法，只需执行一整套检查，查看单击了哪些选项卡，并使用if语句手动运行要加载的页面列表等。这是否会导致严重的性能损失？或者我可以在网站的其他地方添加一个替代链接

更新

一直在研究很多东西，突然想到HTML5中新的

data

属性应该可以在这里帮助我

从jQuery1.4.3HTML5数据开始，属性将自动拉入jQuery的数据对象。因此，我将我的链接设置为如下所示：

 <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>

然后通过以下方式将其加载到我的选项卡内容：

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

---

虽然我还没有进行测试，但我认为如果我使用PHP对数据查询进行json编码，我可以对需要发送到ajax页面的任何数据进行编码，以传递搜索参数。

不确定我是否知道您试图实现的目标。。。是这样的吗

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

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