使用Ajax制作选项卡
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用Ajax制作选项卡</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>网站源码</li>
<li>原生手册</li>
<li>推荐博文</li>
</ul>
<span><a href="">更多下载>></a></span>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
//1. 获取选项卡与对应显示的内容区块对象
var box=document.getElementsByClassName('box')[0];
var ul=box.getElementsByTagName('ul')[0];
var tab=ul.getElementsByTagName('li');
var list=box.getElementsByTagName('div');
//给每一个选项卡添加事件
for(var i=0;i<tab.length;i++){
tab[i].index=i;
tab[i].addEventListener('click',getData,false);
}
//点击事件getData
function getData() {
// console.log(this.index);
// 1.初始化标签页样式
for(var i=0;i<tab.length;i++){
tab[i].className='';
list[i].style.display='none'
}
// 2.设置激活标签页样式
this.classList.add('active');
list[this.index].style.display='block';
//3.Ajax获取数据
var n=this.index;
//创建request对象
var request=new XMLHttpRequest();
//监听响应状态
request.onreadystatechange=function () {
if(request.readyState===4){
// console.log(request.responseText);
list[n].innerHTML=request.responseText;
}
};
//设置请求参数
request.open('get','admin/data.php?p='+n,true);
//发送请求
request.send(null);
}
// 模拟点击操作, 获取默认页数据
var defaultTab=ul.firstElementChild;
defaultTab.addEventListener('click',show,false);
var event=new Event('click');
defaultTab.dispatchEvent(event);
function show() {
var request=new XMLHttpRequest();
request.onreadystatechange=function () {
if(request.readyState===4){
list[0].innerHTML=request.responseText;
}
};
request.open('get','admin/data.php?p=0',true);
request.send(null);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php $data = [ '<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>', '<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>', '<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>', '<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>' ]; $index = $_GET['p']; echo $data[$index];
运行实例 »
点击 "运行实例" 按钮查看在线实例
