Ajax制作仿php中文网选项卡
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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>
<body>
<!-- 掌握循环操作 -->
<h2>仿PHP中文网选项卡</h2>
<div class="box">
<ul>
<!-- 创建四个选项卡,并设置第一个为当前激活高亮状态 -->
<li class="active">技术文章</li>
<li>网站源码</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>
var box = document.getElementsByClassName('box')[0];
var ul = box.getElementsByTagName('ul')[0];
var tab = ul.getElementsByTagName('li');
var list = box.getElementsByTagName('div');
// alert(tab.length);
for (var i=0; i<tab.length; i++) {
tab[i].index = i;
tab[i].addEventListener('click', getData, false);
}
// 事件对应的函数
function getData() {
for (var i=0; i<tab.length; i++) {
//第一步: 将除了当前选项卡之外的所有标签样式全部清空
tab[i].className = '';
//第二步: 将除了当前信息列表之外的列表全部隐藏
list[i].style.display = 'none';
}
//设置用户当前操作的选项卡为高亮显示
this.classList.add('active');
list[this.index].style.display = 'block';
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例