收藏
批改状态：合格
老师批语：
选项卡---完全仿朱老师的去做的，还需要反复学习。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
h2 {
text-align: center;
}
.box {
width:538px;
height: 580px;
/*background-color: #F8F8FF;*/
margin: auto;
border:1px solid #D3D3D3;
}
.box > ul {
margin: 0;
padding: 0;
background-color:#F5F5F5;
overflow: hidden;
}
.box > ul li {
list-style-type: none;
width:90px;
height: 36px;
float:left;
line-height: 36px;
text-align: center;
border-right: 1px solid #D3D3D3;
border-bottom:1px solid #D3D3D3;
border-radius:2px;
}
.box > ul+span {
float:right;
width:90px;
height: 36px;
line-height: 36px;
margin-top:-36px;
}
.box > ul+span>a {
text-decoration: none;
color:gray;
}
.box li.active {
background-color: white;
border-bottom:none;
border-top:3px solid #ff7f50;
box-shadow:2px 5px 2px lightgray;
}
.box div {
display:none;
}
.box div ul {
margin: 10px auto;
padding: 10px;
list-style-type: none;
}
.box div ul li{
line-height: 1.6em;
}
.box div ul li a{
text-decoration: none;
color:gray;
}
.box div ul li a:hover {
color:black;
}
.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 class="box1" style="display:block">
<ul>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-03-31</span></li>
<li><a href="">js教程|JS实现JAVA的List功能</a><span>2018-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>
<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>
<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="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
<li><a href="">日薪月e的博客|JS-明星相册和迷你计算器-2018年3月30日17</a><span>03-31</span></li>
</ul>
</div>
</div>
<script type="text/javascript">
var box = document.getElementsByClassName('box')[0]
var ul = box.getElementsByTagName('ul')[0]
var tab = ul.getElementsByTagName('li')
var list = box.getElementsByTagName('div')
// alert(box.nodeName)
for (var i=0; i<tab.length; i++) {
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 = ''
}
this.className = 'active'
// alert(this.index)
list[this.index].style.display = 'block'
}
}
//问题代码
// for(var i=0, i<tab.length, i++) {
// tab[i].index = i
// tab[i].onmouseover = function(){
// for(var i=0,i<tab.length,i++)
// tab[i].className = ''
// list[i].style.display = 'none'
// }
// }
// this.className = 'active'
// list[this.index].style.display = 'block'
// }
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
自动回复机器人---只能先实现功能，熟悉一下代码，后面再反复学习了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聊天机器人</title>
</head>
<body>
<div>
<div contenteditable="true">
<h2>机器人客服</h2>
<ul>
<li></li>
</ul>
</div>
<table>
<tr>
<td><textarea name="text" id="" cols="50" rows="5"></textarea></td>
<td><button>发送</button></td>
</tr>
</table>
</div>
<script type="text/javascript">
var text = document.getElementsByName('text')[0]
var btn = document.getElementsByTagName('button')[0]
var list = document.getElementsByTagName('ul')[0]
btn.onclick = function(){
// alert(text.value)
if (text.value.length == 0) {
alert('请不要发送空信息')
return false
}
var info = text.value
text.value = ''
var li = document.createElement('li')
var hphone = '<img src="../images/sl.jpg" width="30" style="border-radius:50%">'
li.innerHTML = hphone + info
list.appendChild(li)
setTimeout(function(){
var replyInfo = ['你好呀','客官想要买什么呀','您先自己看看吧','都要打包吗']
var temp = replyInfo[Math.floor(Math.random()*4)]
var reply = document.createElement('li')
var cphone ='<img src="../images/boy.jpeg" width="30" style="border-radius:50%">'
reply.innerHTML = cphone + temp
list.appendChild(reply)
},1000)
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
