jQuery的标签，并根据查询字符串中使用

技术使用不同的Ajax内容：PHP 5.3和jQuery 1.5jQuery的标签，并根据查询字符串中使用

我的一个网页上的一些标签工作，点击时新的内容加载到一个div。使用下面的代码，我可以得到它的工作给予标签“＃链接1”的链接，并创造了包裹在等效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内容的页面，将querystring附加到当前页面，然后我可以使用这个非JavaScript用户来显示相关内容...

For exa mple用户是原来的页面上

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

，虽然我还没有测试我相信我可以编码，我需要发送到AJAX页面通过搜索参数传递data-query如果我使用PHP JSON编码的任何数据。

来源

2011-03-03 bateman_ap

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

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

来源

2011-03-03 12:41:25 Simeon

jQuery的标签，并根据查询字符串中使用

回答

相关问题