可能使製表符鏈接到離散的HTML文件，並且不會重新加載整個頁面？

我需要菜單選項卡鏈接到我的服務器上的單獨的HTML文件，具有唯一的URL。我知道這本身並不需要CSS，但我還想保留Javascript-enabled菜單的「即時加載」效果，以及僅加載頁面的相關部分。（我認爲，只有CSS的菜單會重新加載整個頁面）。這可能嗎？可能使製表符鏈接到離散的HTML文件，並且不會重新加載整個頁面？

來源

2012-07-20 Robert

也許看看jquery-ui？ – 2012-07-20 17:36:40

有可能與Knockout.js和/或JQuery的的幫助。

你可以用JQuery using the Tabs plugin provided by JQuery UI做到這一切。你將不得不編寫所有你自己的CSS，這樣你就不會得到默認的「標籤」外觀，而是類似菜單的東西。

或者，您可以使用Knockout.js創建客戶端視圖模型，其中包含一組綁定到菜單項的命令。然後，每個命令都會觸發頁面更新，很可能使用JQuery。

這裏有一個如何這可能工作開始於一個基本的菜單非常高層次的例子：

<ul> 
<li data-bind="menuOption1"> 
... 
</li> 
</li>

一個Knockout.js查看模型

var MenuViewModel = function() 
{ 
    this.menuOption1 = function() { 
    // TODO: show the discreet HTML page 
    } 
} 

ko.applyBindings(new MenuViewModel());

你如何實際顯示的頁面是向上給你。使用JQuery AJAX調用來加載頁面內容可能是最簡單的。

來源

2012-07-20 17:40:38 sellmeadog

謝謝，jQuery UI可能是我的技能水平的最佳解決方案。我已經在我的服務器上設置了一個演示：http://irishhuddle.com///RSS/development-bundle/demos/tabs/ajax.html ...但是，是否有可能讓每個標籤都是唯一的網址，所以地址欄是ajax加載的html文件的鏈接？例如， – Robert 2012-07-22 21:26:29

，我想第一個標籤的URL是http://irishhuddle.com/RSS/development-bundle/demos/tabs/ajax/content1.html而不是http://irishhuddle.com/RSS/development -bundle/demos/tabs/ajax.html＃ui-tabs-1 – Robert 2012-07-22 21:32:37

是的。選項卡插件支持歷史和書籤，以便每個選項卡具有唯一的URL。使用AJAX請求，您必須使用一些加載和選擇選項來配置這些選項卡，但是在我的答案中，它們都記錄在鏈接中。 – sellmeadog 2012-07-23 17:29:51

您如何製作/設置菜單的樣式對單擊菜單中鏈接的頁面的方式沒有影響。爲了避免點擊時重新加載頁面，您需要向該頁面發出ajax請求並將其加載到當前頁面中。

我建議使用jQuery's AJAX以避免跨瀏覽器問題。

例子：

$('#menu a').click(function(ev){ 
    $.ajax({ 
     url: "test.html", 
     cache: false 
    }).done(function(html) { 
     $("#results").append(html); 
    }); 

    ev.preventDefalt(); 
});

來源

2012-07-20 17:35:00 wanovak

非常感謝。 – Robert 2012-09-12 16:46:20

可能使製表符鏈接到離散的HTML文件，並且不會重新加載整個頁面？

回答

相關問題