JS选项卡实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
.box{
background-color:#F1F4F4;
width: 600px;
height: 300px;
border:1px solid #ccc;
margin: 20px auto;
}
.box >ul
{
height: 50px;
text-align: center;
width: 758px;
margin: 20px auto 10px;
}
.box>ul li
{ list-style-type: none;
float:left;
width: 130px;
height:36px;
line-height: 36px;
color: #071418;
background: #FFFFFF;
cursor: pointer;
display: list-item;
text-align: -webkit-match-parent;
}
.box li.active {
font-weight: bolder;
border-bottom: none;
border-top: 3px solid orangered;
background: #2087ed;
}
.box div {display: none;}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">国内虚拟主机<i></i></li>
<li >免备案虚拟主机<i></i></li>
<li>云服务<i></i></li>
<li>最新优惠<i></i></li>
</ul>
<div style="display: block;">
<table>
<tr>
<td>体验型150M</td>
<td>云峰A 1G</td>
<td>云峰B 2G</td>
</tr>
<tr>
<td>68/年</td>
<td>188/年</td>
<td>288/年</td>
</tr>
<tr>
<td>网页空间：150M+赠送30M
</td>
<td>网页空间：1G+赠送200M
</td>
<td>网页空间：2G+赠送400M
</td>
</tr>
<tr>
<td>每月流量：15G
</td>
<td>每月流量：15G
</td>
<td>每月流量：15G
</td>
</tr>
<tr>
<td>数据库：MySQL5（30M）
</td>
<td>数据库：MySQL5（30M）</td>
<td>数据库：MySQL5（30M）
</td>
</tr>
<tr>
<td>机房线路：国内电信机房
</td>
<td>机房线路：国内电信机房
</td>
<td>机房线路：国内电信机房
</td>
</tr>
<tr>
<td><button>立即购买</button> <button>查看详情</button></td>
<td><button>立即购买</button> <button>查看详情</button></td>
<td><button>立即购买</button> <button>查看详情</button></td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td>香港体验型 150M</td>
<td>香港体验型 200M</td>
<td>香港体验型 300M</td>
</tr>
<tr>
<td>68/年</td>
<td>188/年</td>
<td>288/年</td>
</tr>
<tr>
<td>网页空间：150M+赠送30M
</td>
<td>网页空间：1G+赠送200M
</td>
<td>网页空间：2G+赠送400M
</td>
</tr>
<tr>
<td>每月流量：15G
</td>
<td>每月流量：15G
</td>
<td>每月流量：15G
</td>
</tr>
<tr>
<td>数据库：MySQL5（30M）
</td>
<td>数据库：MySQL5（30M）</td>
<td>数据库：MySQL5（30M）
</td>
</tr>
<tr>
<td>机房线路：国内电信机房
</td>
<td>机房线路：国内电信机房
</td>
<td>机房线路：国内电信机房
</td>
</tr>
<tr>
<td><button>立即购买</button> <button>查看详情</button></td>
<td><button>立即购买</button> <button>查看详情</button></td>
<td><button>立即购买</button> <button>查看详情</button></td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td>入门型云服务器</td>
<td>标准型云服务器</td>
<td>商务型云服务器</td>
</tr>
<tr>
<td>68/年</td>
<td>188/年</td>
<td>288/年</td>
</tr>
<tr>
<td>网页空间：150M+赠送30M
</td>
<td>网页空间：1G+赠送200M
</td>
<td>网页空间：2G+赠送400M
</td>
</tr>
<tr>
<td>每月流量：15G
</td>
<td>每月流量：15G
</td>
<td>每月流量：15G
</td>
</tr>
<tr>
<td>数据库：MySQL5（30M）
</td>
<td>数据库：MySQL5（30M）</td>
<td>数据库：MySQL5（30M）
</td>
</tr>
<tr>
<td>机房线路：国内电信机房
</td>
<td>机房线路：国内电信机房
</td>
<td>机房线路：国内电信机房
</td>
</tr>
<tr>
<td><button>立即购买</button> <button>查看详情</button></td>
<td><button>立即购买</button> <button>查看详情</button></td>
<td><button>立即购买</button> <button>查看详情</button></td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td>注册立送</td>
<td>域名优惠</td>
<td>京东购物卡</td>
</tr>
<tr>
<td>68/年</td>
<td>188/年</td>
<td>288/年</td>
</tr>
<tr>
<td>网页空间：150M+赠送30M
</td>
<td>网页空间：1G+赠送200M
</td>
<td>网页空间：2G+赠送400M
</td>
</tr>
<tr>
<td>每月流量：15G
</td>
<td>每月流量：15G
</td>
<td>每月流量：15G
</td>
</tr>
<tr>
<td>数据库：MySQL5（30M）
</td>
<td>数据库：MySQL5（30M）</td>
<td>数据库：MySQL5（30M）
</td>
</tr>
<tr>
<td>机房线路：国内电信机房
</td>
<td>机房线路：国内电信机房
</td>
<td>机房线路：国内电信机房
</td>
</tr>
<tr>
<td><button>立即购买</button> <button>查看详情</button></td>
<td><button>立即购买</button> <button>查看详情</button></td>
<td><button>立即购买</button> <button>查看详情</button></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var box = document.getElementsByClassName('box')[0]
var ul = box.getElementsByTagName('ul')[0]
var li = ul.getElementsByTagName('li')
var div=box.getElementsByTagName('div')
for (i=0;i<li.length;i++)
{
li[i].index=i
li[i].onmouseover=function(){
for (i=0;i<li.length;i++)
{ li[i].className=''
div[i].style.display='none'
}
this.className='active'
div[this.index].style.display = 'block'
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2。
在线客服实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线客服</title>
<style type="text/css">
.box {
width: 450px;
height: 650px;
border: 2px solid green;
background-color: lightskyblue;
margin: auto;
}
.box>div {
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;
background-color: lightyellow;
}
button {
width: 60px;
height: 40px;
border: none;
background-color: lightyellow;
}
button:hover {
cursor: pointer;
background-color: orange;
}
</style>
</head>
<body>
<div class='box'>
<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">
text=document.getElementsByName('text')[0]
submit=document.getElementsByTagName('button')[0]
show=document.getElementsByTagName('ul')[0]
var sum = 0
submit.onclick=function(){
if (text.value.length==0){
alert('请输入聊天内容！')
}
var li=document.createElement('li')
li.innerHTML=text.value
text.value=''
show.appendChild(li)
sum+=1
setTimeout(function(){
var info=['您好，请稍等','正在查询','欢迎光临']
var temp = info[Math.floor(Math.random()*3)]
var re=document.createElement('li')
re.innerHTML=temp
show.appendChild(re)
sum+=1
},2000)
if(sum>10) {
show.innerHTML=''
sum=0
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写图
