Question

使用的技术：PHP 5.3和jQuery 1.5

我正在处理页面上的某些标签，以便在点击时将新内容加载到div中。使用下面的代码，我可以让它工作，为标签提供“＃link1”的链接，并在页面中创建包含在等效标识<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来获取使用以下内容的网址：

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

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

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

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

Answer 1

不确定我是否知道你想要达到的目标......是这样的吗？

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

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

1 个答案: