導入外部HTML內容內使用JavaScript AJAX沒有jQuery的

我需要一些幫助，我有以下HTML代碼：導入外部HTML內容內使用JavaScript AJAX沒有jQuery的

<ul class="menu-list"> 
    <li class="active"><a href="cont1.html" title="Title 1">Link 1</a></li> 
    <li><a href="cont2.html" title="Title 2">Link 2</a></li> 
    <li><a href="cont3.html" title="Title 3">Link 3</a></li> 
    <li><a href="cont4.html" title="Title 4">Link 4</a></li> 
</ul> 

<div class="content">   
    <div class="innerContent"> 
     <!-- Insert external HTML content here --> 
    </div> 
</div>

所以，當我點擊「鏈接1」，例如，我需要將「cont1.html」中的內容添加到div class =「innerContent」中，不要忘記在點擊的li內添加「class =」active「」。只使用Javascript/AJAX而不使用Jquery，並且不要更改此HTML。

我做了一個類似的example here，但是爲同一頁面的內容工作，而不是不同的頁面，我不知道爲什麼，但不能在IE上工作。

請有人能幫助我嗎？

來源

2013-04-22 user1309015

試試這個

<ul class="menu-list"> 
    <li class="active"><a href="javascript:display('cont1.html');" title="Title 1" >Link 1</a></li> 
    <li><a href="javascript:display('cont2.html');" title="Title 2" >Link 2</a></li> 
    <li><a href="javascript:display('cont3.html');" title="Title 3" >Link 3</a></li> 
    <li><a href="javascript:display('cont4.html');" title="Title 4" >Link 4</a></li> 
    </ul> 

<div class="content">   
    <div class="innerContent" id="innerContent"> 
    </div> 
</div>

的javaScript

function display(url) 
{ 
    var xmlhttp; 
    if (window.XMLHttpRequest) 
     {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
     } 
    else 
     {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
      xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      document.getElementById("innerContent").innerHTML=xmlhttp.responseText; 
     } 
     } 
    xmlhttp.open("GET",url,true); 
    xmlhttp.send(); 
}

來源

2013-04-22 17:32:43 NullPointerException

無法更改makup HTML並使用「onclick」屬性，對象標記或iframe。必須使用原始HTML而不做任何更改。感謝您試用 – user1309015 2013-04-22 17:45:35

看到這個小提琴http://jsfiddle.net/chauhangs/qHQhH/3/ – NullPointerException 2013-04-22 17:47:22

所以你也有這些限制？ – NullPointerException 2013-04-22 17:48:30

像你想的外部文件的AJAX請求，這聽起來我，然後用這個responseText來填充你的容器的innerHTML。

本文將指導您如何做出一個XMLHttpRequest - AJAX沒有jQuery的：https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest

所以你必須當你點擊這些鏈接之一來創建一個功能，它運行，這將1）執行AJAX請求以獲取外部HTML; 2）用responseText填充你的innerContent <div>;和3）更改哪個<li>分類爲「活動」。

來源

2013-04-22 17:41:24 davidtheclark

好的描述，但你能給我一個例子嗎？ – user1309015 2013-04-22 22:54:37

導入外部HTML內容內使用JavaScript AJAX沒有jQuery的

回答

相關問題