jQuery 选项卡和基于查询字符串使用不同的 ajax 内容

Question

使用的技术：PHP 5.3 和 jQuery 1.5

我正在处理页面上的一些选项卡，以便在单击时将新内容加载到 div 中。使用下面的代码，我可以让它工作，给标签一个“#link1”的链接，并在页面中创建包含在等效 ID <div id="link1">My content</div> 中的内容，并使用下面的 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 用户而不是页面的 href 来调用生成内容 html 的页面，将查询字符串附加到当前页面，然后我可以将其用于非 javascript 用户来显示相关内容...

例如用户在原始页面上

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

如果他们点击标签在地图上显示结果，我希望 href 是：

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

但是我从

获取地图内容

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

谁能推荐实现这一目标的最佳方法？最好的方法是进行大量检查以查看已单击哪些选项卡并使用 if 语句手动运行要加载的页面列表等。这会导致很大的性能损失吗？或者我可以在其他地方放一个替代链接吗？

更新

研究了很多东西，突然想到 HTML 5 中的新 data 属性应该可以帮到我。

从 jQuery 1.4.3 开始，HTML 5 数据属性将自动拉入 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>

然后我可以使用 jQUery 获取获取内容的 url：

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

然后通过以下方式将其加载到我的标签内容中：

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

虽然我还没有进行测试，但我认为如果我使用 PHP 对其进行 json 编码，我可以对需要发送到 ajax 页面的任何数据进行编码，以通过 data-query 中的搜索参数。

Answer 1

不确定我是否知道您想要实现的目标...是这样的吗？

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