代码：
仿PHP中文网选项卡：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿PHP中文网选项卡</title>
<style type="text/css">
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;
overflow: hidden;
}
.box>ul li {
list-style-type: none;
width: 90px;
height: 33px;
float: left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 36px;
}
.box ul+span {
float: right;
width: 174px;
height: 33px;
line-height: 33px;
margin-top: -36px;
border-bottom: 1px solid #ccc;
text-align: right;
}
.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 {
/*隐藏div*/
display: none;
/*第一个div要显示*/
}
.box div ul {
/*内边距*/
margin: 0;
/*外边距*/
padding: 5px;
/*去除表格样式小黑点*/
list-style-type: none;
}
.box div ul li {
/*行间距离*/
line-height: 1.5em;
}
.box div ul li a {
color: #636363;
text-decoration: none;
padding: 5px;
}
.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 style="display: block;">
<ul>
<li><a href="">js教程 | Angular开发实践（二）：HRM运行机制</a><span>2018-04-02</span></li>
<li><a href="">js教程 | Angular开发实践（一）：环境准备及框架搭</a><span>2018-04-02</span></li>
<li><a href="">js教程 | ajax响应json字符串和json数组的方法</a><span>2018-04-02</span></li>
<li><a href="">js教程 | JS实现AJAX局部刷新（附代码）</a><span>2018-04-02</span></li>
<li><a href="">js教程 | 用Ajax实现同步和异步有什么区别</a><span>2018-04-02</span></li>
<li><a href="">php教程 | PHP中删除数组中的元素详解</a><span>2018-04-02</span></li>
<li><a href="">Python教程 | 关于Python中的range 对象是不是迭代器的</a><span>2018-04-02</span></li>
<li><a href="">js教程 | JavaScript设计模式系列八：外观模式</a><span>2018-04-02</span></li>
<li><a href="">js教程 | Ajax如何实现城市二级联动</a><span>2018-04-02</span></li>
<li><a href="">js教程 | AJAX跨域请求JSONP获取JSON数据步骤详解</a><span>2018-04-02</span></li>
<li><a href="">js教程 | JavaScript设计模式七：装饰者模式</a><span>2018-04-02</span></li>
<li><a href="">Python教程 | Python代码实现图片文字的识别</a><span>2018-04-02</span></li>
<li><a href="">js教程 | Ajax优化页面刷新的两种方法</a><span>2018-04-02</span></li>
<li><a href="">js教程 | ajax有哪几种方法可以实现局部刷新</a><span>2018-04-02</span></li>
<li><a href="">js教程 | JavaScript设计模式系列六：桥接模式</a><span>2018-04-02</span></li>
<li><a href="">js教程 | 怎样用AjaxSubmit()提交file文件</a><span>2018-04-02</span></li>
<li><a href="">js教程 | 使用Blod做出ajax的进度条下载</a><span>2018-04-02</span></li>
<li><a href="">js教程 | Ajax+json实现购物车结算</a><span>2018-04-02</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>2018-03-05</span></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>2018-03-05</span></li>
<li><a href="">前端模板 | 钻石小鸟官网模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 紫色调网上家具购物网站模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 紫色的旅游窄屏HTML模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 战争网游公司网站模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 饮料甜点的招商网站模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 小清新房间装修设计报价公司模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 时尚糖果色平面模特网站模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 漂亮大气的黑灰色摩托车企业模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 绿色调实用的UI工具包网页模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 蓝色风格的汽车网站模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 教育培训学校静态网站模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 灰色简洁单调瀑布流网站模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 观天下足球直播网站模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 房地产租赁企业网站模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 法式面包蛋糕制作企业网站模板</a><span>2018-03-03</span></li>
<li><a href="">前端模板 | 锻炼有氧健身单页网站模板</a><span>2018-03-03</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">MySQL | CentOS7安装MySQL5.7密码查看与修改-</a><span>2018-02-07</span></li>
<li><a href="">MySQL | 大小写敏感性 lower_case_table_names-</a><span>2018-02-07</span></li>
<li><a href="">MySQL | PDO 与 MySQLi 二者效率简单比较-MySql参</a><span>2018-02-07</span></li>
<li><a href="">MySQL | PDO 事务处理-MySql参考手册</a><span>2018-02-07</span></li>
<li><a href="">MySQL | PDO对象常用方法-MySql参考手册</a><span>2018-02-07</span></li>
<li><a href="">MySQL | 数据库抽象层 PDO-MySql参考手册</a><span>2018-02-07</span></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-</a><span>2018-02-07</span></li>
<li><a href="">MySQL | 日志-MySql参考手册</a><span>2018-02-07</span></li>
<li><a href="">MySQL | 查询表-MySql参考手册</a><span>2018-02-07</span></li>
<li><a href="">MySQL | 修改表中的指定一条数据-MySql参考手册</a><span>2018-02-07</span></li>
<li><a href="">MySQL | 数据库表中数据操作-MySql参考手册</a><span>2018-02-07</span></li>
<li><a href="">MySQL | Mysql表复制及备份还原 -MySql参考手册</a><span>2018-02-07</span></li>
<li><a href="">MySQL | 数据库与表显示、创建、删除-MySql参考手</a><span>2018-02-07</span></li>
<li><a href="">MySQL | 用户创建、权限、删除-MySql参考手册</a><span>2018-02-07</span></li>
<li><a href="">MySQL | MySQL语句大全-MySql参考手册</a><span>2018-02-07</span></li>
<li><a href="">MySQL | 配置phpmyadmin连接多实例MySQL-MySql</a><span>2018-02-07</span></li>
<li><a href="">MySQL | 灾难恢复-MySql参考手册</a><span>2018-02-06</span></li>
<li><a href="">MySQL | 主从复制读写分离-MySql参考手册</a><span>2018-02-06</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">推荐博文 | 各大网站必用前端js选项卡。实现案列 2018-</a><span>2018-03-31</span></li>
<li><a href="">推荐博文 | Javascript 实现计算器-20180331 16:14</a><span>2018-03-31</span></li>
<li><a href="">推荐博文 | javascript实战2+2018年3月31日15时39分</a><span>2018-03-31</span></li>
<li><a href="">推荐博文 | Excel表格数据转化到数据库里面</a><span>2018-03-31</span></li>
<li><a href="">推荐博文 | PHP数据迁移到EXCEL表格</a><span>2018-03-31</span></li>
<li><a href="">推荐博文 | js标签选择器，聊天机器人——2018年3月31</a><span>2018-03-31</span></li>
<li><a href="">推荐博文 | js实战：选项卡的制作 2018年03月31日 12点</a><span>2018-03-31</span></li>
<li><a href="">推荐博文 | 0330两个js小案例</a><span>2018-03-31</span></li>
<li><a href="">推荐博文 | 初识js 图片切换,简易计算器 2018-3-29</a><span>2018-03-31</span></li>
<li><a href="">推荐博文 | JS实例-选项卡与机器人客服--2018年3月31</a><span>2018-03-31</span></li>
<li><a href="">推荐博文 | JS-明星相册和迷你计算器-2018年3月30日17</a><span>2018-03-31</span></li>
<li><a href="">推荐博文 | js将秒数改变为经历的时间</a><span>2018-03-30</span></li>
<li><a href="">推荐博文 | 用javascript实现明星相册-20180330-16:34</a><span>2018-03-30</span></li>
<li><a href="">推荐博文 | 3.28仿制页面首页</a><span>2018-03-30</span></li>
<li><a href="">推荐博文 | 20180328课后作业及html阶段总结(仿</a><span>2018-03-30</span></li>
<li><a href="">推荐博文 | javascript教学第一节课--2018年3月30日上</a><span>2018-03-30</span></li>
<li><a href="">推荐博文 | js明星照片，迷你计算器——2018年3月30日</a><span>2018-03-30</span></li>
<li><a href="">推荐博文 | 仿站-3月30日11时14分</a><span>2018-03-30</span></li>
</ul>
</div>
</div>
<script type="text/javascript">
// 先获取选项卡和对应的区块信息列表
var box=document.getElementsByClassName('box')[0]
// alert(box.nodeName)测试
// 从box里拿ul
var ul=box.getElementsByTagName('ul')[0]
// 从ul里找li
var tab=ul.getElementsByTagName('li')
// box下所有div
var list=box.getElementsByTagName('div')
// 给每个选项卡循环添加事件
// alert(tab.length)测试
for (var i=0; i<tab.length; i++) {
// 给当前选项卡添加一个自定义属性index
tab[i].index=i
// 给每一个选项卡添加事件 鼠标滑动到事件
tab[i].onmouseover=function(){
// alert(1)测试
// 清空标签的样式，把除了当前的选项卡和对应列表之外的标签全部样式清空
for (var i=0; i<tab.length; i++) {
// 把选项卡的样式清空
tab[i].className=''
// 将除了当前信息列表之外的列表全部隐藏
list[i].style.display = 'none'
}
this.className = 'active'
// alert(this.index)测试
list[this.index].style.display = 'block'
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
仿自动应答在线客服机器人：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿机器人聊天窗口</title>
<style type="text/css">
div:nth-child(1) {
width: 450px;
height: 650px;
background-color: lightblue;
margin: 30px auto;
color: gray;
box-shadow: 3px 3px 3px #808080
}
h3 {
text-align: center;
margin-bottom: -15px;
}
div:nth-child(2) {
width: 400px;
height: 500px;
border: 2px solid lightgray;
background-color: #efefef;
margin: 20px auto 10px;
}
ul {
list-style: none;
line-height: 2em;
overflow: hidden;
padding: 15px;
}
table {
width: 90%;
height:80px;
margin: auto;
}
textarea{
width: 330px;
border: none;
resize: none;
background-color: #efefef;
}
button {
width: 60px;
height: 40px;
background-color: lightskyblue;
color: white;
border: none;
}
button:hover {
cursor: pointer;
background-color: orange;
}
</style>
</head>
<body>
<div>
<h3>在线答疑解惑</h3>
<div contenteditable="true">
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td align="right"><textarea cols="50" rows="4" name="text"></textarea></td>
<td align="left"><button type=button>发送</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
//获取到页面中的按钮,文本域,对话内容区
var btn = document.getElementsByTagName('button')[0]
var text = document.getElementsByName('text')[0]
var list = document.getElementsByTagName('ul')[0]
var sum = 0
//添加按钮点击事件,获取用户数据并推送到对话窗口中
btn.onclick = function () {
// alert(text.value)
//获取用户提交的内容
if (text.value.length == 0) {
alert('请输入您想要问的问题')
return false
}
var userComment = text.value
//立即清空用户信息区
text.value = ''
//创建一个新节点li
var li = document.createElement('li')
li.innerHTML = userComment
var userPic = '<img src="../images/wukong.jpg" width="30" style="border-radius:50%">'
li.innerHTML = userPic+userComment
//将新节点插入到对话列表中
list.appendChild(li)
sum += 1
setTimeout(function(){
var info = ['人是人他妈生的，妖是妖他妈生的，只要你有一颗善良的心就不再是妖，是人妖。','修得金身是菩提 淡泊名利与欢喜 渡缘渡劫渡别离 矮马我可真文艺','南无阿弥陀佛']
var temp = info[Math.floor(Math.random()*3)]
//取1-5之间的一个整数:Math.floor(Math.random()*6 + 1)
var reply = document.createElement('li')
var kefuPic = '<img src="../images/tangseng.jpg" width="30" style="border-radius:50%;">'
reply.innerHTML = kefuPic + '<span style="color:lightskyblue">'+temp+'</span>'
list.appendChild(reply)
sum += 1
},2000)
if (sum > 8) {
list.innerHTML = ''
sum = 0
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄：
