没有jQuery的导入外部HTML内容的内部使用Javascript AJAX [英] Importing external HTML inner content with Javascript AJAX without Jquery
问题描述
我需要一些帮助,我有以下的HTML code:
I need some help, I've got the following HTML code:
<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类=innerContent里面附加的内部内容,不忘加上级= 主动里面的点击里。只需使用的JavaScript / AJAX没有jQuery和不改变此HTML。
So, when I click "Link 1", for example, I need to get the inner content from "cont1.html" to be appended inside of the div class="innerContent", not forgetting to add the "class="active"" inside the clicked li. Using just Javascript/AJAX without Jquery and without changing this HTML.
我做了一个类似的<一个href="http://stackoverflow.com/questions/15884640/hide-and-show-elements-by-clicking-on-a-link-with-java-script-without-jquery/15935020#15935020">example这里 ,但工作在同一页面,而不是不同页面的内容,我不知道为什么,但不能在IE浏览器。
I did a similar example here, but is working for the content of the same page, not different pages, and I don't know why but doesn't work on IE.
请,有人可以帮我吗?
推荐答案
试试这个
<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
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();
}
这篇关于没有jQuery的导入外部HTML内容的内部使用Javascript AJAX的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!