第十二节课作业：1.仿PHP中文网选项卡 - 前端部分

Home > List of blog posts > 第十二节课作业：1.仿PHP中文网选项卡
Blogger Information
Blog 87
fans 0
comment 0
visits 59712
Special Recommendation
More>
Related recommendations
实例

<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
第二章：4.变量的作用域

2018-04-24 10:15:16