选项卡 代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
ul{
list-style: none;
}
*{
margin: 0;
padding: 0;
}
#tab{
border: 1px solid #ccc;
margin: 20px auto;
width: 403px;
border-top: none;
}
.list ul{
overflow: hidden;
}
.list li{
float: left;
}
.list li{
padding-left: 28px;
padding-right: 28px;
padding-top: 6px;
padding-bottom: 6px;
border: 1px solid #ccc;
background: -moz-linear-gradient(top, #FEFEFE, #EDEDED);
background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
border-right: none;
cursor: pointer;
}
#listCon{
height: 100px;
}
#listCon div{
padding:10px;
position:absolute;
opacity:0;
filter:alpha(opacity=0);
}
.list li:first-child{
border-left: none;
}
.list li:hover{
background: #fff;
border-bottom: none;
}
.list li.cur{
background: #fff;
border-bottom: none;
}
#listCon div.cur{
opacity:1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<div id="tab">
<div class="list">
<ul>
<li class="cur">李白</li>
<li>白居易</li>
<li>李商隐</li>
<li>孟浩然</li>
</ul>
</div>
<div id="listCon">
<div class="cur">
<p>静夜思</p>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p></div>
<div><p>暮江吟</p>
<p>一道残阳铺水中，半江瑟瑟半江红。</p>
<p>可怜九月初三夜，露似珍珠月似弓。</p></div>
<div><p>夜雨寄北</p>
<p>君问归期未有期，巴山夜雨涨秋池。</p>
<p>何当共剪西窗烛，却话巴山夜雨时。</p></div>
<div><p>春晓</p>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p></div>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("tab");
var lis = oDiv.getElementsByTagName("li");
var oDivCon = document.getElementById("listCon");
var lisDiv = oDivCon.getElementsByTagName("div");
for(var i=0;i<lis.length;i++){
lis[i].index = i;
lis[i].onmouseover = function(){
show(this.index);
}
}
function show(a){
for(var j=0;j<lis.length;j++){
lis[j].className = "";
lisDiv[j].className = "";
}
lis[a].className = "cur";
lisDiv[a].className = "cur";
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
客服自动回复 代码
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>自动应答系统</title>
<style type="text/css">
body {
background:url('https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/bg.gif');
font-family:微软雅黑;
font-size:14px;
}
body, div, ul, ol, li, h3, p {
margin:0;
padding: 0;
}
.top {
margin:30px 0 10px 60px;
}
.top p {
font-size:50px;
color:#ffea00;
}
.top p span {
color:#fff;
font-size:30px;
}
.main {
width:1300px;
margin:30px auto;
overflow:hidden;
}
.right {
width:330px;
height:600px;
float:right;
background-color:#c3d5ea;
border-radius:2%;
box-shadow:0 0 5px 2px #2c69a0;
/* margin-right:30px; */
}
.left {
width:900px;
height:600px;
float:left;
/* background-color:#c3d5ea; */
/* border-radius:2%;
box-shadow:0 0 15px 5px #2c69a0; */
}
.left .content {
width:900px;
height:400px;
background-color:#c3d5ea;
border-radius:1%;
box-shadow:0 0 5px 2px #2c69a0;
}
.left .content ul {
list-style: none;
line-height: 2em;
overflow: hidden;
}
.left .content ul li {
margin:5px 0 0 20px;
}
.left .content ul li img {
margin-right:5px;
}
.left textarea{
border: none;
resize: none; /* 禁止调整元素的尺寸 */
width:897px;
height:113px;
margin-top:20px;
background-color:#c3d5ea;
border-radius:1%;
box-shadow:0 0 5px 2px #2c69a0;
}
/* .left .bj {
width:900px;
height:120px;
margin-top:20px;
background-color:#c3d5ea;
border-radius:1%;
box-shadow:0 0 5px 2px #2c69a0;
} */
.left .enter {
width:900px;
height:40px;
}
.left .enter p {
float:right;
line-height:40px;
color:#fff;
margin:30px 20px 0 0 ;
/* font-size:14px; */
}
.left .enter button {
width:100px;
height:40px;
float:right;
margin-top:20px;
border-radius:5%;
background-color:#5daae9;
border:none;
color:#fff;
font-size:14px;
font-family:微软雅黑;
}
.left .enter button:hover {
background-color:#e38d04;
/* border:none; */
color:#fff;
font-size:16px;
}
.foot {
width:100%;
margin: 40px 0 0 60px;
}
.foot p {
color:#fff;
font-size:12px;
}
.right .welcone {
width:330px;
height:50px;
line-height:50px;
text-align:center;
color:#fc424b;
border-bottom:1px solid #cbddf2;
}
.right .r1 h3 {
color:#498ac4;
text-align:center;
line-height:2em;
border-bottom:1px solid #cbddf2;
}
.right .r1 ul li {
list-style-type:none;
line-height:2.2em;
text-align:center;
margin-top:5px;
}
.right .r1 ul li a {
color:#498ac4;
font-size:13px;
text-decoration: none;
}
.right .r1 ul li a:hover{
color:#fc424b;
font-size:14px;
}
</style>
</head>
<body>
<div class="top">
<p><strong>XXXXXX公司</strong> <span>网上咨询自动应答系统</span></p>
</div>
<div class="main">
<div class="left">
<div class="content">
<ul>
<li></li>
</ul>
</div>
<textarea name="text"></textarea>
<div class="enter">
<button type="button">发 送</button>
<!-- <p>按Enter可快速发送！</p> -->
</div>
</div>
<div class="right">
<div class="welcone">欢迎进入网上咨询系统！</div>
<div class="r1"><h3>服务人员</h3>
<ul>
<li><a href="">网上咨询自动应答系统（智能机器人）</a></li>
<li><a href="">网上咨询自动应答系统（智能机器人）</a></li>
<li><a href="">网上咨询自动应答系统（智能机器人）</a></li>
<li><a href="">网上咨询自动应答系统（智能机器人）</a></li>
<li><a href="">网上咨询自动应答系统（智能机器人）</a></li>
</ul>
</div>
<div class="r1"><h3>常见问题</h3>
<ul>
<li><a href="">常见问题常见问题常见问题常见问题</a></li>
<li><a href="">常见问题常见问题常见问题常见问题</a></li>
<li><a href="">常见问题常见问题常见问题常见问题</a></li>
<li><a href="">常见问题常见问题常见问题常见问题</a></li>
<li><a href="">常见问题常见问题常见问题常见问题</a></li>
<li><a href="">常见问题常见问题常见问题常见问题</a></li>
<li><a href="">常见问题常见问题常见问题常见问题</a></li>
<li><a href="">常见问题常见问题常见问题常见问题</a></li>
</ul>
</div>
</div>
</div>
<div class="foot"><p>XXXXXX公司网上咨询自动应答系统 版权所有</p></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="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/yk.jpg" width="30" style="border-radius:50%">'
li.innerHTML = userPic+userComment
//将新节点插入到对话列表中
list.appendChild(li)
sum += 1
setTimeout(function(){
var info = ['您好！我是网上咨询自动应答系统（智能机器人）, 很高兴为您服务。','对不起,没有为您找到合适的答案,请换句话试试!或者进入 <a style="color:#12c6b3" href="http://www.baidu.com" target="_blank" >人工咨询页面</a>','我是谁？我在哪？我在做什么？']
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="https://html-1255417912.cos.ap-guangzhou.myqcloud.com/xuexi/jqr.jpg" width="30" style="border-radius:50%;">'
// reply.innerHTML = '你有啥事呀,我的帅哥哥' +kefuPic
reply.innerHTML = kefuPic + '<span style="color:red">'+temp+'</span>'
// reply.style.float = 'right'
list.appendChild(reply)
sum += 1
},2000)
if (sum > 8) {
list.innerHTML = ''
sum = 0
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码
