PHP+Ajax实现Tab效果

最新推荐文章于 2021-08-05 19:28:17 发布

hsj454174023

最新推荐文章于 2021-08-05 19:28:17 发布

阅读量1k

点赞数

分类专栏： Ajax 文章标签： ajax php xmlhttprequest microsoft internet javascript

本文链接：https://blog.youkuaiyun.com/hsj454174023/article/details/5579284

版权

Ajax 专栏收录该内容

1 篇文章

订阅专栏

用Ajax实现Tab效果的

先创建

ajax.php，在其中输入如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<title>Sample 2_1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--
//Create a boolean variable to check for a valid Internet Explorer instance.
var xmlhttp = false;
//Check if we are using IE.
function creatXMLHttp(){
try
{
  //If the Javascript version is greater than 5.
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  //alert ("You are using Microsoft Internet Explorer.");
}
catch (e)
{
  //If not, then use the older active x object.
  try
  {
   //If we are using Internet Explorer.
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   //alert ("You are using Microsoft Internet Explorer");
  }
  catch (E)
  {
   //Else we must be using a non-IE browser.
   xmlhttp = false;
  }
}
//If we are using a non-IE browser, create a javascript instance of the object.
if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
  xmlhttp = new XMLHttpRequest();
  //alert ("You are not using Microsoft Internet Explorer");
}
}

然后在同目录下面创建4个html文件，文件名称和代码如下：

<div style="width: 770px; text-align: left;">
<h1>Page 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div style="width: 770px; text-align: left;">
<h1>Page 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div style="width: 770px; text-align: left;">
<h1>Page 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div style="width: 770px; text-align: left;">
<h1>Page 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

最后将这些文件放置在PHP服务器下面，运行ajax.php 就可以看到效果。