实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战1：仿PHP中文网选项卡</title>
<style type="text/css">
body {
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
a {
text-decoration: none;
color: #666;
-webkit-transition: color .2s ease;
transition: color .2s ease
}
a:hover {
color: #000000
}
h2 {
text-align: center;
}
.box {
width: 538px;
height: 518px;
background-color: white;
border:1px solid #ccc;
margin:20px auto;
color: #363636;
box-shadow: 10px 10px 10px lightgray;
}
.box > ul {
margin:0;
padding:0;
background-color: #f8f8f8;
overflow: hidden;
}
.box > ul li {
list-style-type: none;
width: 90px;
height: 36px;
float: left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center;
line-height: 36px;
}
.box > ul li:hover {
cursor: pointer;
}
.box > ul li a {
text-decoration: none;
}
.box > ul + span {
float: right;
width: 90px;
height: 36px;
line-height: 36px;
margin-top: -36px;
}
.box > ul + span a {
color: #696969;
text-decoration: none;
}
.box li.active {
background-color: #fff;
font-weight: bolder;
border-bottom: none;
border-top: 3px solid orangered;
}
.box div {
display: none;
}
.box ul li {
padding-bottom: 5px;
font-size: 14px;
font-family: Microsoft Yahei;
list-style-type: none;
}
.box ul li span {
float: right;
color: red;
margin-right: 20px;
}
</style>
</head>
<body>
<h2>第十二节课作业：1.仿PHP中文网选项卡</h2>
<div class="box">
<ul>
<li class="active" href="" title="技术文章">技术文章</li>
<li href="" title="网站源码">网站源码</li>
<li href="" title="原生源码">原生源码</li>
<li style="font-weight:bolder" href="" title="推荐博客">推荐博客</li>
</ul>
<span><a href="">更多下载>></a></span>
<!-- div>ul>(li>a{php教程 | SpringMVC + summernote实现可视化编辑}>span{2018-04-02})*18 -->
<div style="display:block">
<ul>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
<li><a href="">php教程 | SpringMVC + summernote实现可视化编辑<span>2018-04-02</span></a></li>
</ul>
</div>
<!-- div>ul>(li>a{前端模板 | Bootstrap响应式网站后台管理面板}>span{2018-03-05})*18 -->
<div>
<ul>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
<li><a href="">前端模板 | Bootstrap响应式网站后台管理面板<span>2018-03-05</span></a></li>
</ul>
</div>
<!-- div>ul>(li>a{MySQL | 批量修改Mysql表引擎为InnoDB的方法-}>span{2018-02-07})*18 -->
<div>
<ul>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
<li><a href="">MySQL | 批量修改Mysql表引擎为InnoDB的方法-<span>2018-02-07</span></a></li>
</ul>
</div>
<!-- div>ul>(li>a{周厅的博客 | js实战：选项卡和自动应答机器人实现-2018}>span{2018-04-02})*18 -->
<div>
<ul>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
<li><a href="">周厅的博客 | js实战：选项卡和自动应答机器人实现-2018<span>2018-04-02</span></a></li>
</ul>
</div>
</div>
<script type="text/javascript">
//1.先获取选项卡和对应的区块信息列表
var box = document.getElementsByClassName('box')[0]
var ul = box.getElementsByTagName('ul')[0]
var tab = ul.getElementsByTagName('li')
var list = box.getElementsByTagName('div')
//2.给每个选项卡添加事件：循环添加
// alert(tab.length)获取选项卡的数量
for (var i = 0; i < tab.length; i++) {
//给当前的选项卡添加一个自定义属性 index，拿到当前选项卡编号，给每一个选项卡添加事件
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 = 'none'
}
this.className = 'active'
//alert()
//
list[this.index].style.display = 'block'
// list[this.index]
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
