jquery ajax：从菜单链接加载内容

Question

由于大多数网页都是用HTML5构建的，因此我一直在寻找一种方法将内容从其他来源加载到我的内容框中（就像过去一样，您会使用php include）。

所以我有一个index.html，我从其他来源加载内容。

我的菜单是用几个链接的列表：

<nav class="links"> 
         <ul> 
          <li><a href="index.html">Link1</a></li> 
          <li><a href="index.html">Link2</a></li> 
          <li><a href="index.html">Link3</a></li> 
          <li><a href="index.html">Link4</a></li> 
         </ul> 
        </nav> 

通常我加载我的内容在：

<script> 
     $(document).ready(function(){ 
      $("#content").load("content1.html"); 
     }); 
    </script> 

我如何可以加载不同的链接不同content.html页面？基本上它是如何包含在PHP中？我想将内容加载到

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

感谢您的帮助！

Answer 1

您可以通过制作if else条件语句来完成此操作。所以我把点击链接的href的值放在link variable，然后有条件地你可以改变内容加载。 :)

 $(document).ready(function(){ 
 
      $(".links ul li a").click(function(){ 
 

 
       var link=$(this).attr("href"); //This here will do the trick :) 
 

 
       if(link=="index.html"){ 
 
        alert("load content 1"); //$("#content").load("content1.html"); 
 
       } 
 
       else if(link=="contact.html"){ 
 
        alert("load content 2"); //$("#content").load("content2.html"); 
 
       } 
 
       else if(link=="about.html"){ 
 
        alert("load content 3"); //$("#content").load("content3.html"); 
 
       } 
 
      }) 
 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<nav class="links"> 
 
     <ul> 
 
      <li><a href="index.html">Link1</a></li> 
 
      <li><a href="contact.html">Link2</a></li> 
 
      <li><a href="about.html">Link3</a></li> 
 
     </ul> 
 
    </nav>