学习5
来源:互联网 发布:视频压制软件 编辑:程序博客网 时间:2024/06/15 19:26
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<style>
*{
padding:0px;
margin:0px;
}
ul {
list-style-type:none;
margin-left:350px;
}
ul > li{
float:left;
padding:20px;
cursor:pointer;
}
.in_le{
background-color:red;
color:white;
}
#bottom_block{
position:relative;
}
#bottom_block div{
height:50px;
position:absolute;
top:0px;
left:0px;
display:none;
border:1px; solid gray;
width:100%;
padding:10px 0px 10px 0px;
background-color:#eef2f7;
}
</style>
<div id="ting">
<div id="top_block">
<ul>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="1">北大概括</li>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="2">招生与资助</li>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="3">学院与系部</li>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="4">教育教学</li>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="5">科学研究</li>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="6">合作交流</li>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="7">校园生活</li>
</ul>
<div style="clear:both;"></div>
</div>
<div id="bottom_block">
<div id="info_1" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是一</div>
<div id="info_2" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是二</div>
<div id="info_3" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是三</div>
<div id="info_4" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是四</div>
<div id="info_5" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是五</div>
<div id="info_6" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是六</div>
<div id="info_7" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是七</div>
</div>
</div>
</body>
<script type="text/javascript">
function divMouseEnter(mou){
mou.className="in_le";
var number = mou.getAttribute("data-id");
var divId = "info_" + number;
var divBlock = document.getElementById(divId);
divBlock.style.display = "block";
}
function divMouseLeave(mou){
mou.className="";
var number = mou.getAttribute("data-id");
var divId = "info_" +number;
var divBlock = document.getElementById(divId);
divBlock.style.display = "none";
}
function divMouseEnte(ent){
ent.style.display = "block";
}
function divMouseLeav(ent){
ent.style.display = "none";
}
</script>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<style>
*{
padding:0px;
margin:0px;
}
ul {
list-style-type:none;
margin-left:350px;
}
ul > li{
float:left;
padding:20px;
cursor:pointer;
}
.in_le{
background-color:red;
color:white;
}
#bottom_block{
position:relative;
}
#bottom_block div{
height:50px;
position:absolute;
top:0px;
left:0px;
display:none;
border:1px; solid gray;
width:100%;
padding:10px 0px 10px 0px;
background-color:#eef2f7;
}
</style>
<div id="ting">
<div id="top_block">
<ul>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="1">北大概括</li>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="2">招生与资助</li>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="3">学院与系部</li>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="4">教育教学</li>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="5">科学研究</li>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="6">合作交流</li>
<li class="" onmouseenter="divMouseEnter(this)" onmouseleave="divMouseLeave(this)" data-id="7">校园生活</li>
</ul>
<div style="clear:both;"></div>
</div>
<div id="bottom_block">
<div id="info_1" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是一</div>
<div id="info_2" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是二</div>
<div id="info_3" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是三</div>
<div id="info_4" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是四</div>
<div id="info_5" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是五</div>
<div id="info_6" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是六</div>
<div id="info_7" onmouseenter="divMouseEnte(this)" onmouseleave="divMouseLeav(this)">我是七</div>
</div>
</div>
</body>
<script type="text/javascript">
function divMouseEnter(mou){
mou.className="in_le";
var number = mou.getAttribute("data-id");
var divId = "info_" + number;
var divBlock = document.getElementById(divId);
divBlock.style.display = "block";
}
function divMouseLeave(mou){
mou.className="";
var number = mou.getAttribute("data-id");
var divId = "info_" +number;
var divBlock = document.getElementById(divId);
divBlock.style.display = "none";
}
function divMouseEnte(ent){
ent.style.display = "block";
}
function divMouseLeav(ent){
ent.style.display = "none";
}
</script>
</html>
阅读全文
1 0
- 学习5
- 学习5
- javascript学习(5) Bom学习
- 深度学习:LeNet-5学习
- 【机器学习-斯坦福】学习笔记5 - 生成学习算法
- 【机器学习-斯坦福】学习笔记5 - 生成学习算法
- 【机器学习-斯坦福】学习笔记5 - 生成学习算法
- shell脚本学习-5(sed命令学习)
- html 5从零开始学习(学习笔记)
- Objective-C学习笔记(5)----学习SQLite3
- Android学习笔记5---Activity学习
- 机器学习手记[5]--决策树方法学习
- IOS学习---C语言基础学习5
- IOS学习---OC基础学习5
- hadoop学习5-HDFS API学习
- 机器学习笔记 - 贝叶斯学习(5)
- Spring学习笔记(5)-----------IoC再度学习
- android学习笔记(5)Activity生命周期学习
- C#连接oracle数据库
- 谷歌
- 读书笔记——《深入理解Java虚拟机》系列之四种垃圾收集算法
- TabLayout和Bundle传值viewpage Fragment
- Elasticsearch6.x之Kibana插件安装-yellowcong
- 学习5
- IO流:Reader/Write字符流
- cropper.js 裁剪图片并上传(文档翻译+demo)
- 协程coroutine
- 欢迎使用CSDN-markdown编辑器
- STM32项目(七) —— 智能仓库管理系统
- Java入门以及进阶路线、时间安排
- 设计模式学习–建造者模式
- Android开发学习笔记:利用drawable中xml文件编写自定义控件样式(shape)