1

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>

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.

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.

Please, someone can help me?

4

2 回答 2

1

尝试这个

  <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>

脚本

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-22T17:32:43.873 回答
0

在我看来，您想对外部文件发出 AJAX 请求，然后使用 responseText 填充容器的 innerHTML。

本文将指导您完成如何制作 XMLHttpRequest——没有 jQuery 的 AJAX：https ://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest

因此，您必须创建一个函数，该函数在您单击其中一个链接时运行，它将 1) 执行 AJAX 请求以获取外部 HTML；2）用responseText填充你的innerContent <div>；3)<li>被归类为“活跃”的变化。

于 2013-04-22T17:41:24.947 回答