实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用异步请求获取（仿PHP中文网选项卡）</title>
<style>
h2 {
text-align: center;
}
.box {
width: 538px;
height: 500px;
background-color: white;
border: 1px solid #ccc;
margin: 20px auto;
color: #363636;
}
.box > ul {
margin: 0;
padding: 0;
background-color: #f8f8f8;
/*border-bottom: 1px solid #ccc;*/
overflow: hidden;
}
.box > ul li {
list-style-type: none;
width: 90px;
height:36px;
float:left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 36px;
}
.box ul + span {
float:right;
width:90px;
height: 36px;
line-height: 36px;
margin-top: -36px;
}
.box ul + span >a {
color: #696969;
text-decoration: none;
}
.box li.active {
background-color: #fff;
font-weight: bolder;
border-bottom: none;
border-top: 3px solid orangered;
}
.box div {
display: none;
}
.box div ul {
margin: 0;
padding: 10px;
list-style-type: none;
}
.box div ul li {
line-height: 1.5em;
/*background-color: yellow;*/
}
.box div ul li a {
color: #636363;
text-decoration: none;
}
.box div ul li a:hover {
color: #000;
}
.box div ul li span {
float: right;
color: red;
}
</style>
</head>
<body>
<!-- 掌握循环操作 -->
<h2>用异步请求获取（仿PHP中文网选项卡）</h2>
<div class="box">
<ul>
<!-- 创建四个选项卡,并设置第一个为当前激活高亮状态 -->
<li class="active">大放厥词</li>
<li>PHP中文网</li>
<li>洗心革面</li>
<li>重新做人</li>
</ul>
<span><a href="">更多下载>></a></span>
<!-- 其实你在页面中看到列表,其实都已经在页面中了,只是隐藏了起来,实际开发过程,大多是通过Ajax请求来动态获取 -->
<div style="display: block;">
<!-- <ul>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- <li><a href="">PHP教程 | PHP生成带logo图像二维码的两种方法</a><span>05-15</span></li>-->
<!-- </ul>-->
</div>
<div>
<!-- <ul>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- <li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>05-15</span></li>-->
<!-- </ul>-->
</div>
<div>
<!-- <ul>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- <li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>05-15</span></li>-->
<!-- </ul>-->
</div>
<div>
<!-- <ul>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- <li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>05-15</span></li>-->
<!-- </ul>-->
</div>
</div>
<script>
// 1、获取需要的元素
var box = document.getElementsByClassName('box')[0];
var ul = box.getElementsByTagName('ul')[0];
var tab = ul.getElementsByTagName('li');
var div = box.getElementsByTagName('div');
for(var i=0;i<tab.length;i++){
//这个里是 li,每个按钮
tab[i].index=i; //关键的一步，将tab[i]和循环I绑定,为当前的选项卡添加自定义属性index:当前对象的编号.
//靠这个i 来做到绑定 i 、按钮标签、DIV内容。
tab[i].addEventListener('click',danji,false)
}
function danji() {
for (var n = 0; n < tab.length; n++) {
//按钮的样式全部清空。
tab[n].className = '';
//每个div显示为隐藏。
div[n].style.display = 'none';
}
//设置用户当前操作的选项卡添加样式，为高亮显示，
this.classList.add('active');
//点击的DIV的设置为可见,this.index=tab[i]
div[this.index].style.display = 'block'; //div和li索引公用，绑定
// 1、创建对象。
var num = this.index;
var re = new XMLHttpRequest();
re.onreadystatechange = function () {
if (re.readyState === 4) {
//console.log(re.responseText);
//给DIV传值
div[num].innerHTML = re.responseText;
}
};
re.open('get', 'admin/data.php?p=' +num, false);
re.send(null);
}
//由于首页面开始没有数据，做一个机器人帮点击第0个标签按钮。
var firsttab=ul.firstElementChild;
firsttab.addEventListener('click',input,false);
//创建一个envet点击事件
var event=new Event('click');
//把点击事件派发给 firsttab,让他自己点击。
firsttab.dispatchEvent(event);
//复制以上的ajax代码，改DIV索引为0。
function input() {
var re = new XMLHttpRequest();
re.onreadystatechange = function () {
if (re.readyState === 4) {
//console.log(re.responseText);
//给DIV传值
div[0].innerHTML = re.responseText;
}
};
re.open('get', 'admin/data.php?p=' +0, false);
re.send(null);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例