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

首页 > 博客列表 > 第十二节课作业：1.仿PHP中文网选项卡
博主信息
博文 87
粉丝 0
访问量 72825
专题推荐
更多>
实例

<!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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
批改状态：未批改

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
第二章：4.变量的作用域

2018-04-24 10:15:16