需要通過顯示在中心「格」

左「DIV」我已經在我的網頁左側的「格」列表項的菜單列表項觸發的HTML頁面。我正在選擇其中一個列表項並打開一個新的網頁。需要通過顯示在中心「格」

我想有顯示的內容在我中心「DIV」當選擇左側的「格」的列表項。

我該如何做到這一點？

我在「COL2」（左）列表項和我張貼的HTML頁面「COL1」（在中心）。這目前只會發佈其中一個html頁面（如果我可以得到它的工作）。所以，我需要修復這個腳本並修改它來加載三個html頁面中的一個。

腳本：

<script type="text/javascript"> 
    $(document).ready( 
function(){ 
    $('a.openInThisPage').click( 
     function(){ 
      $('#col1').load('.\listOfServices.htm'); 
      return false; 
     }); 
}); 


    </script>

HTML：

<div class="col2"> 
        <!-- Column 2 start, left side --> 
        <ul class="slidedoormenu"> 
         <li><a href="#">» List of Services</a></li> 
         <li><a href="#">» Pricing Stucture</a></li> 
         <li><a href="#">» About Me</a></li> 
        </ul> 
        <!-- Column 2 end --> 
</div>

來源

2010-10-29 jmac

你想在鏈接頁面上打開一個遠程'html'文件*到* a'div'中？ – 2010-10-29 18:01:10

這是比較容易的，使用jQuery（你在你的標籤包括在內，所以我假設你沒事用它爲這個）：

$(document).ready(
function(){ 
    $('a.openInThisPage').click(
     function(){ 
      $('#newContent').load('path/to/htmlFile.html #idOfTheContentYouWantToLoad'); 
      return false; 
     }); 
});

與加價

<a href="path/to/htmlFile.html" class="openInThisPage">Click to view new content</a> 

<div id="newContent"> 
</div>

我已經得到了a demo of this on my own site，因爲它給了我一個藉口，做醫生是誰的東西。

這使用jQuery的load()將遠程內容加載到名爲div; load()需要兩個項目的字符串：

的URL要加載到當前頁的頁面，並
一個選擇，以確定要加載到當前頁面該網頁的一部分。

常用的JavaScript的警告也適用，當然，你限制來自同一（子）域的網頁，它可以用書籤引起的問題（除非你反映的URL以某種方式新內容）。

編輯迴應OP的發佈代碼。

鑑於您的發佈（X）HTML沒有特色我貼之類的任何a元素，你需要你的jQuery適應如下：

$(document).ready(
function(){ 
    $('#slidedoormenu a').click(
     function(){ 
      $('#col1').load('.\listOfServices.htm'); 
      return false; 
     }); 
});

請注意，在\該URL可能會導致問題（我不完全確定，但這是我第一次看到它在URL中使用，所以我不確定它是否有效）。

編輯響應從OP評論：

@大衛，我對這個線程一個問題。如何讓其中一個「默認」頁面出現在右欄中（即在用戶點擊鏈接之前）？再次感謝，JMAC

你可以簡單地使用$(document).ready()：

$(document).ready(
function(){ 
    $('#newContent').load('path/to/htmlFile.html #idOfTheContentYouWantToLoad'); 
} 
);

來源

2010-10-29 18:03:30

我在我的html： – jmac 2010-10-29 18:18:36

@jmac中有這個，請編輯你的**到你的**問題**，而不是評論。 – 2010-10-29 18:20:05

– jmac 2010-10-29 18:20:09

如果你真的想這樣做，你有兩個基本的選擇。

框架，這會導致書籤，鏈接共享，打印和搜索引擎索引問題。使用JavaScript（和Ajax技術），它們具有不同的問題與書籤，聯用的JavaScript的依賴沿着共享和搜索引擎索引
僞造幀。

你幾乎總是最好的只是有多個頁面，並在每個頁面中包括常見的內容。模板或包含系統可以幫助你。我更喜歡Template-Toolkit，其中包含ttree utility用於從模板生成靜態頁面，但也可用於從Perl動態生成頁面。 TT有一個簡單include指令和更強大的wrapper指令（該網站有good examples of both in action）。 PHP是一個流行的選項，並有一個include指令。

來源

2010-10-29 18:02:34 Quentin

另外（儘管要求這個人可能太多了），他可以使用MVC架構將視圖拉回爲字符串。 – treeface 2010-10-29 18:15:00

Template-Toolkit在MVC中提供V很好。 – Quentin 2010-10-29 18:16:16

我剛剛通過[本頁]（http://template-toolkit.org/about.html）閱讀，而且確實如此。 – treeface 2010-10-29 18:23:38

用大衛·托馬斯的代碼（這是做正確的和簡單的方法）時，包括了jQuery文件確保頁面

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script> 
<!-- Fallback for CDN --> 
<script>!window.jQuery && document.write('<script src="/js/jquery.js"><\/script>')</script>

或者乾脆：

<script src="/js/jquery.js"></script>

來源

2010-10-29 18:22:06

我使用頂級網址（唯一的區別是我使用的是1.4.2）。我沒有第二個腳本。 – jmac 2010-10-29 18:29:13

這很好 - 它基本上是一個後備到您的本地副本的情況下，谷歌的不加載。 – 2010-10-29 18:54:25

需要通過顯示在中心「格」

回答

相關問題