实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
.box{
width: 500px;
height: 400px;
margin: auto;
border:1px solid #666;
}
p{
float: right;
height: 38px;
line-height: 38px;
margin-top: -38px;
}
h2{
text-align: center;
}
.box >ul{
padding: 0;
margin: 0;
height: 38px;
line-height: 38px;
overflow: hidden;
background-color: #f8f8f8;
}
.box >ul li{
margin: 0;
width: 90px;
height: 35px;
float: left;
line-height: 38px;
text-align: center;
list-style-type: none;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
}
a{
text-decoration: none;
color: #696969;
}
.box >ul li.one{
border-top:3px solid red;
border-bottom:none;
font-weight: bolder;
}
.box div ul {
margin: 10px 15px;
padding: 0;
clear: both;
}
.box div ul li{
list-style-type: none;
line-height: 1.5em;
}
.box div ul li span{
float: right;
color: red;
}
.box div{
display: none;
}
</style>
</head>
<body>
<h2>选项卡</h2>
<div class="box">
<ul >
<li class="one" ><a href="">技术文章</a></li>
<li><a href="">网站源码</a></li>
<li><a href="">原生手册</a></li>
<li><a href="">推荐博文</a></li>
</ul>
<p>更多下载>></p>
<div>
<ul>
<li><a href="">PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
<li><a href="">PHP生成带logo图像二维码的两种方法</a><span>03-30</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板</a><span>03-30</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
<li><a href="">原生手册 | CentOS7安装MySQL5.7密码查看与修改</a><span>03-30</span></li>
</ul>
</div>
<div>
<ul>
<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</span></li>
<li><a href="">无耻的鱼 | javascript初体验之图片切换与计算机</a><span>03-30</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')
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='one'
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">
table{
width: 400px;
height: 500px;
border: 1px solid red;
background-color: lightgreen;
}
tr:nth-child(2){
height: 420px;
}
tr:nth-child(2) > td{
line-height:1.1em;
border: 1px solid green;
}
textarea{
resize: none;
}
button{
width: 80px;
height: 50px;
font-size: 20px;
border: 0;
}
button:hover{
background-color:lightblue;
font-size: 1.5em;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">机器人客服</th>
</tr>
<tr>
<td class="one" colspan="2" contenteditable="true">
</td>
</tr>
<tr>
<td>
<textarea cols="35" rows="5"></textarea>
</td>
<td><button>发送</button>
</td>
</tr>
</table>
<script type="text/javascript">
var text=document.getElementsByTagName('textarea')[0]
var input=document.getElementsByClassName('one')[0]
var button=document.getElementsByTagName('button')[0]
var sum=0
button.onclick=function(){
if (text.value.length==0) {
alert('内容不能为空')
text.focus()
return flase
}
var user=text.value
text.value=''
var p=document.createElement('p')
p.innerHTML=user
input.appendChild(p)
sum=sum+1
setTimeout(function(){
var info=['回复一','回复二','回复三','回复四','回复五','回复六']
var temp=info[Math.floor(Math.random()*4)]
var replay=document.createElement('p')
replay.innerHTML=temp
input.appendChild(replay)
sum+=1
},500)
if (sum>12) {
input.innerHTML=''
sum=0
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
