2011-03-03 55 views
0

技術使用不同的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編碼的任何數據。

回答

0

不知道我是否知道你想達到的目標......是這樣的嗎?

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