选项卡
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
body { margin: 0; font-size: 14px; color: #333; }
ul,li,dl,dd { margin: 0; padding: 0; list-style: none;}
.clear {clear: both;}
.box {border: 1px solid #999999; padding: 15px; width: 450px; height: 300px; margin:40px auto 0 auto;}
.box .nav { height: 40px; background: #d6d6d6; line-height: 40px;clear: both; }
.box .nav dd { float: left; width: 25%; text-align: center; }
.box .nav dd.on { background: #333333; color: #fff; }
.box ul { display: none; margin: 10px 0 0 0;}
.box ul li { line-height: 24px; border-bottom: 1px solid #ddd; }
.box ul li span { float: right; }
</style>
</head>
<body>
<div class="box">
<dl class="nav">
<dd class="on">新闻动态</dd>
<dd>行业新闻</dd>
<dd>媒体报道</dd>
<dd>体育新闻</dd>
</dl>
<ul style="display: block;">
<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报：胜利在此复刻</a></li>
<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报：胜利在此复刻</a></li>
<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报：胜利在此复刻</a></li>
<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报：胜利在此复刻</a></li>
<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报：胜利在此复刻</a></li>
<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报：胜利在此复刻</a></li>
<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报：胜利在此复刻</a></li>
<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报：胜利在此复刻</a></li>
<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报：胜利在此复刻</a></li>
<li><span>2018-03-20</span><a href="">恒大发布亚冠战武里南海报：胜利在此复刻</a></li>
</ul>
<ul>
<li><span>2018-02-20</span><a href="">好消息！麦考腰背部无结构性损伤，北京时间周一出院！</a></li>
<li><span>2018-02-20</span><a href="">好消息！麦考腰背部无结构性损伤，北京时间周一出院！</a></li>
<li><span>2018-02-20</span><a href="">好消息！麦考腰背部无结构性损伤，北京时间周一出院！</a></li>
<li><span>2018-02-20</span><a href="">好消息！麦考腰背部无结构性损伤，北京时间周一出院！</a></li>
<li><span>2018-02-20</span><a href="">好消息！麦考腰背部无结构性损伤，北京时间周一出院！</a></li>
<li><span>2018-02-20</span><a href="">好消息！麦考腰背部无结构性损伤，北京时间周一出院！</a></li>
<li><span>2018-02-20</span><a href="">好消息！麦考腰背部无结构性损伤，北京时间周一出院！</a></li>
<li><span>2018-02-20</span><a href="">好消息！麦考腰背部无结构性损伤，北京时间周一出院！</a></li>
<li><span>2018-02-20</span><a href="">好消息！麦考腰背部无结构性损伤，北京时间周一出院！</a></li>
<li><span>2018-02-20</span><a href="">好消息！麦考腰背部无结构性损伤，北京时间周一出院！</a></li>
</ul>
<ul>
<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
<li><span>2018-02-28</span><a href="">杀个措手不及!恒大出征武里南疑似遭遇两大盘外招</a></li>
</ul>
<ul>
<li><span>2018-03-01</span><a href="">火箭惨败后，德帅透露1重要消息，雷霆意外遭晴天霹雳</a></li>
<li><span>2018-03-01</span><a href="">火箭惨败后，德帅透露1重要消息，雷霆意外遭晴天霹雳</a></li>
<li><span>2018-03-01</span><a href="">火箭惨败后，德帅透露1重要消息，雷霆意外遭晴天霹雳</a></li>
<li><span>2018-03-01</span><a href="">火箭惨败后，德帅透露1重要消息，雷霆意外遭晴天霹雳</a></li>
<li><span>2018-03-01</span><a href="">火箭惨败后，德帅透露1重要消息，雷霆意外遭晴天霹雳</a></li>
<li><span>2018-03-01</span><a href="">火箭惨败后，德帅透露1重要消息，雷霆意外遭晴天霹雳</a></li>
<li><span>2018-03-01</span><a href="">火箭惨败后，德帅透露1重要消息，雷霆意外遭晴天霹雳</a></li>
<li><span>2018-03-01</span><a href="">火箭惨败后，德帅透露1重要消息，雷霆意外遭晴天霹雳</a></li>
<li><span>2018-03-01</span><a href="">火箭惨败后，德帅透露1重要消息，雷霆意外遭晴天霹雳</a></li>
<li><span>2018-03-01</span><a href="">火箭惨败后，德帅透露1重要消息，雷霆意外遭晴天霹雳</a></li>
</ul>
</div>
<script type="text/javascript">
var box = document.getElementsByClassName('box')[0]
var dl = document.getElementsByClassName('nav')[0]
var tab = document.getElementsByTagName('dd')
var ul = document.getElementsByTagName('ul')
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 = ''
ul[i].style.display = 'none'
}
this.className = 'on'
ul[this.index].style.display = 'block'
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
仿机器人聊天窗口
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿机器人聊天窗口</title>
<style type="text/css">
body { margin: 0; font-size: 14px; color: #333; }
ul,li,dl,dd { margin: 0; padding: 0; list-style: none;}
.win { width: 500px; height: 400px; overflow-y: auto; overflow-x: none; border: 2px solid #ccc; margin: 30px auto 0 auto; }
.win ul { padding: 15px; line-height: 1.8; }
.bot { width: 504px; margin: 0 auto;}
.bot textarea { width:400px; height: 50px; border: 2px solid #ccc; padding: 5px 10px; float: left;}
.bot button { width:80px; height: 64px; margin: 0; border: 2px solid #ccc; float: right;}
</style>
</head>
<body>
<div class="win">
<ul>
<li></li>
</ul>
</div>
<div class="bot">
<textarea cols="50" rows="3" name="text"></textarea>
<button name="btn" type=button>发送</button>
</div>
<script type="text/javascript">
var win = document.getElementsByClassName('win')[0]
var list = document.getElementsByTagName('ul')[0]
var text = document.getElementsByName('text')[0]
var btn = document.getElementsByName('btn')[0]
var i = 0
btn.onclick = function () {
if (text.value.length == 0) {
alert('您还没有输入内容哦')
return false
}
var value = text.value
text.value = ''
var li = document.createElement('li')
li.innerHTML = value
list.appendChild(li)
i += 1
setTimeout(function(){
var info = ['请问有什么可以帮您的？','今天是星期六，不上班，有事工作日来','请排队取号，轮到你的时候再来问把']
var temp = info[Math.floor(Math.random()*3)]
var reply = document.createElement('li')
reply.innerHTML = '<span style="color:#cc0000">'+temp+'</span>'
list.appendChild(reply)
i += 1
},1000)
if (i > 16) {
list.innerHTML = ''
i = 4
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
手写代码：
