tab选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
.box{
padding: 0;
margin: 0 auto;
width: 508px;
height: 500px;
border: 1px solid #ccc;
}
/*选择.box的直接子元素ul*/
.box > ul {
margin: 0;
padding: 0;
background-color: #f8f8f8;
overflow: hidden;
}
/*选择.box的直接子元素ul的内部元素li 设置宽高 边框居中属性*/
.box > ul li {
list-style-type: none;
width: 90px;
height:40px;
float:left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 40px;
}
/*//这是啥意思？ul底下的span？*/
.box ul+span{
float:right;
width:90px;
height: 40px;
line-height: 40px;
margin-top: -40px;
}
.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;
}
.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>
<div class="box">
<ul>
<li class="active">技术文章</li>
<li>网站源码</li>
<li>原生手册</li>
<li>推荐博文</li>
</ul>
<span>更多下载>></span>
<div style="display: block;">
<ul>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
<li><a href="">js教程 | Ajax交互时被报错误如何</a><span>03-31</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
<li><a href="">前端模板 | 彩色音乐扬声器娱乐网站模板</a><span>03-31</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
<li><a href="">MySql | CentOS7安装MySQL5.7密码查看与修改-</a><span>03-31</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
<li><a href="">谦谦允水的 | 各大网站必用前端js选项卡。实现案列 2018--</a><span>03-31</span></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">
// 获取对应元素
var box = document.getElementsByClassName("box")[0];//获取父级div
var ul = box.getElementsByTagName("ul")[0];//获取顶部ul
var tab = ul.getElementsByTagName('li');//获取tab里边所有li
var list = box.getElementsByTagName('div');//获取里边所有div块
for (var i = 0; i < list.length; i++) {
//给对应的选项卡添加一个索引对应的 就是tab
tab[i].index = i;
tab[i].onmouseover = function(){
for (var i=0; i<tab.length; i++) {
//第一步先恢复初始默认值
tab[i].className = '';
list[i].style.display = 'none';
}
//设置每一个选中tab的执行效果
this.className = 'active';
list[this.index].style.display = 'block';
}
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
自动回复机器人
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿QQ聊天机器人</title>
<style type="text/css">
div:nth-child(1) {
width: 450px;
height: 650px;
background-color: #BB996C;
margin: 30px auto;
color: #333;
box-shadow: 2px 2px 2px #808080;
}
h2 {
text-align: center;
margin-bottom: -10px;
}
div:nth-child(2) {
width: 400px;
height: 500px;
border: 4px double green;
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{
border: none;
resize: none;
width: 99%;
background-color: lightyellow;
}
button {
width: 60px;
height: 40px;
background-color: seagreen;
color: white;
border: none;
}
button:hover {
cursor: pointer;
background-color: orange;
}
</style>
</head>
<body>
<div>
<h2>在线客服</h2>
<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>
</body>
<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(){
//获取用户提交的内容
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/boy.jpeg" width="30" style="border-radius:50%">';//设置头像
li.innerHTML = userPic+userComment;//拼接头像和输入内容
//将新节点插入到对话列表中
list.appendChild(li);
sum += 1;
setTimeout(function(){//计时器2秒执行
var info = ['666','888','~~~~~~~~'];
var temp = info[Math.floor(Math.random()*3)];//随机取整；
var reply = document.createElement('li');
var kefuPic = '<img src="images/sl.jpg" width="30" style="border-radius:50%;">';
reply.innerHTML = kefuPic + '<span style="color:red">'+temp+'</span>';
list.appendChild(reply);//拼接客服回答并创建li添加到ul 内部节点
sum += 1;
},2000);
if (sum > 10) {//同时要判断sum目前节点数如果大于一定程度则清屏。
list.innerHTML = '';
sum = 0;
}
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
