学期Web实验小记
实验1—购物信息调查表
知识点：表格，表单。
1.表单radio选择性别，设置name属性相同，可以防止同时选择
2.下拉选择框是
<select>
<option value="">选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>3.复选框
<form>
<input type="checkbox" value="" checked="checked">内容1
<input type="checkbox" value="" >内容2
<input type="checkbox" value="" >内容3
<input type="checkbox" value="" >内容4
</form>4.表格的rowspan、colspan，textarea的rows、cols、readonly
实验2—css选择器
涉及知识点：元素、id、class、后代、子代、伪类、属性、选择器
1.后代选择器：#div1 ul,所有的ul，子代+所有后代
2.子代选择器：#div >ul,只有子代的ul
3.相邻兄弟选择器：#div1 + div
4.通用兄弟选择器：#div1 ~ div
5.伪类选择器：link、visited、hover、active
可配合nth-child()使用；
div：nth-child(od、even、2n、2n+1）：hover{...}
p:nth-of-type():hover{...}6.属性选择器：input[type=text]{…}也可省略属性值input[type]{…}
实验3、4—欧洲联赛赛程表
涉及知识：表格，边框，居中，选择器，文本修饰
1.表格设置合并边框模型：
border-collapse: collapse;
/*为表格设置合并边框模型：
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。 */2.设置在表格竖直居中：vertical-align：middle
3.文本修饰：text-decoration: none;
文本修饰none(默认值)、underline(下划线)、
overline(上划线)、 line-through(删除线)、
blink(闪烁线)、inherit(规定应从父元素继承
text-decoration 属性的值)实验5—淘宝广告图
涉及知识：布局，浮动，表格
实验6—青岛中能足球页面
涉及知识：布局，定位，CSS3盒子解析方式 box-sizing:border-box,
实验7—竖向导航列表
涉及知识点：列表、边框，伪类选择器
1.设置列表前面圆点消失：list-style-type:none
list-style-position: outside; /* 属性用于声明列表标志相对于列表项内容的位置 */
2.设置列表左边框：border-left：4px solid red;
/* border-style 设置边框样式。有 4 个扩展属性：
border-top- style、 border-right- style、border-bottom- style、border-left- style
none(无边框)、hidden(隐藏边框)、dotted(点线框)、 dashed(虚线框)、solid(实线框)、
double(双线框)、 groove(凹槽)、ridge(突脊)、inset(内陷框)和 outset(外凸框) */3.元素边框与 内容的距离 :a{padding:上 右 下 左；}
4.每个Li之间的距离：a{margin-buttom:5px}
实验8—js验证码
涉及知识：鼠标点击事件、功能函数、Math对象、修改节点值
1.点击图片调用show（）函数：<div id="login" onclick="show()"><a href="#"></a></div> 2.获取4位验证码函数code（）
<script>
function code(n)
{
//定义随机值范围
var a = "azxcvbnmsdfghjklqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP0123456789"
//b用来接收获取的验证码
var b = " "
//循环获取验证码
for(var i = 0;i < n; i++)
{
var index = Math.floor(Math.random() * 62);//产生一个0-60的整数
b += a.charAt(index);//字符串对象常用函数，获取字符串a指定位置处的字符，并连接起来
}
return b;
};
//定义修改显示验证码函数
function show()
{
document.getElementById("login").innerHTML = code(4)
}
//页面加载完就调用函数show（）可省略
window.onload = show
</script>实验9—选项卡（类型导航轮播）
涉及知识：js的点击事件、布局、点击上面标签切换图片、图片下面为跟随图片文字介绍
1.设置单列布局外盒子居中显示：#outer {margin: 0 auto;} 2.开始隐藏全部图片和文字：#outer .section {display:none;overflow:auto} 3.设置每个包含图片和文字的div水平显示：#outer .section div {float: left} 4.设置图片下面的文字p水平、竖直居中,调整位置紧邻图片div：#outer .section div p{line-height:34px;height:34px; text-align:center margin-top:-5px} 5.设置p中的a文字颜色、去掉下换线：#outer .section div p a {color:white;text-decoration:none} 6.设置伪类a变颜色：#outer .section div p a；hover{color:red} 7.上面的标签大盒子 基本设置：宽度高度、距上面距离
8.标签的span里面的a：{display：block；margin：0；padding：20;height:34px;line-height:34px;text-align:center;boeder:1px solid gray} 9.点击切换标签背景颜色改变： #tab1 span a。active1{back-ground:white;border-bottom:1px solid white} 交集选择器，默认第一个<span><a href="#" class="title active1" onmouseover="show('1')"></a></apan> 第二个 <span><a href="#" class="title" onmouseover="show('2')"></a></apan> 10.定义功能函数show()
<script type="text/javascript">
function show(num)
{
var aNum = parseInt(num);
var ele = document.getElementByClassName("section");
//循环把5个div全部设置为不显示
for(var i = 0; i<5 ; i++ )
{
ele[i].style.display = "none";
}
//由点击传入的数字为索引，设置子div包括图片和文字的样式为选中显示的状态
ele[aNum-1].style.display = "block";
var eleTitle = document.getElemetByClassName("title");
//循环把5个标签的class设置为默认的title，没点击之前设置的为停留在第一个
for( var i =0;i<5;i++)
{
eleTitle[i].className = "title";
}
//由点击传入的数字为索引，设置子标签为选中状态
eleTitle[aNum - 1].className = "title active1";
}
</script>实验10—梅兰竹菊类轮播
涉及知识：列表、功能函数（分支setAttribute(“src”,“图片地址”))
1.给每个li绑定功能函数：<li onmouseover="show('m')">梅</li> 2.设置默认照片：<img id = "img" src = "img/梅花.jpg"></img> 3.定义功能函数：
<script>
function show(type)
{
if(type == 'm') document.getElementById("img").setAttribute("src","img/梅花.jpg");
if(type == 'l') document.getElementById("img").setAttribute("src","img/兰花.jpg");
if(type == 'z') document.getElementById("img").setAttribute("src","img/柱子.jpg");
if(type == 'j') document.getElementById("img").setAttribute("src","img/菊花.jpg");
}
</script>实验11—创建表格点击改变颜色
涉及知识：表格，伪类选择器,点击返回当前对象
1.表格的表头：<tr><th>表头第一列</th></tr> 2.给每一行绑定点击事件,返回值为点击的对象tr：<tr onclick="check(this);">内容第一行</tr> 3.定义功能函数；
<script type= "text/javascript">
function check(obj)
{
var len = document.getElementsByTagName("tr").length;
for( var i =0 ;i <len ;i++)
{
//按照索引一次判断点击的是哪个
var temp = document.getElementsByTagName("tr")[i];
if(obj == temp)
temp.style.background = "yellow";
else
temp.style.background = "";
}
}
</script>期中TEST—定位+布局
test1：渐变，大小盒子、定位
1.一个大盒子里面四个小盒子，大盒子设置背景渐变：{background:linear-gradient(120deg,green,yellow);} 2.内一层盒子，原型区域相对定位：{border-radius:数值1 数值2;position:relative;left:180px;top:60px }注意：设置relative后，可相对父定位元素实现移动
3.内二层盒子-上,设置定位、文字阴影：{position:relative;left:150px;top:80px; text-shadow:12px 10px 3px black } 4.设置图片相对定位、边框：{border:6px;border-style:groove;position：relative;left:100px;top:100px;}
test2 定位、三行布局，中间两列布局（一个宽度不固定）、边框
1.一个大盒子内层total盒子，total盒子包括四个小盒子，在total盒子：{position:relative} 2.header盒子：{width:auto} 3.middle_right盒子：{boeder：2px solid red;position:absolute; right:0;top:90px}注：绝对定位元素不在存在，而且忽略其他的元素，相对于父定位标签位置
4.middle_left盒子：{width：auto;height:88px；position:relative;right:280px;top:2px}注：相对定位不忽略其他元素，设置的属性就是相对挨着的元素,也可以说是相对原来自己的位置
5.footer盒子：{width：auto; position:relative;top:5px}
补充练习—js相关数学问题
1.求2的n次幂
<script type="text/javascript">
function cimi(n)
{
var result=1;
for(var i=1;i<=n;i++){
result=result*2;
}
return result;
}
var x=parseInt(prompt ("请输入一个整数求2的n次幂："));
result=cimi(x);
alert("结果是："+result);
document.write("结果是：",result);
</script>parseInt（）转换成整形数
2.阶乘
<script type="text/javascript">
function jiecheng(n)
{
var n,result=1;
for(var i=n;i>=1;i--){
result=n*jiecheng(n-1)
}
return result;
}
var x=prompt("请输入一个整数求阶乘：");
result=jiecheng(x);
alert(x+"的阶乘的结果为："+result);
document.write(x+"的阶乘结果为："+result);
</script>涉及知识：递归
3.斐波那契数列
<script type="text/javascript">
function feibo(x)
{
var x;
var a= new Array(x);
a[0]=1;
a[1]=1;
for(i=2;i<x;i++){
a[i]=a[i-1]+a[i-2];
}
return (a);
}
var n=prompt("请输入一个数，显示斐波那锲数列前n项：");
var result=feibo(n);
document.write(result+" ");
</script>
4.反向输出三位整数
<script type="text/javascript">
function fanxiang()
{
var info =prompt('请输入3位整数：');
alert("反转后为："+info.charAt(2)+info.charAt(1)+info.charAt(0));
}
</script>
<body>
<input type="button" value="输入三位整数 " onclick="fanxiang();" />
</body>涉及知识：BOM方法，按照索引取数字 对象.charAttr();
5.打印最大值
<script type="text/javascript">
function zuida()
{
var tmp;
var a=prompt('输入a');
var b=prompt('输入b');
var c=prompt('输入c');
if(a>b){
tmp=a;
if(c>tmp){
tmp=c;
}
}
else {
tmp=b;
if(c>b){
tmp=c;
}
}
alert('最大的是：'+tmp)
}
</script>6.打印100以内素数
案例—秒杀倒计时
涉及知识：DOM内置对象Date
<head>
<meta charset="utf-8">
<title>倒计时秒杀</title>
<script type="text/javascript">
function countDown(time){
var nowTime = +new Date();
var inputTime = +new Date(time);
var times = (inputTime - nowTime)/1000;
var d = parseInt(times / 60 /60 /24);
d = d<10?'0'+d:d;
var h = parseInt(times / 60 /60 %24);
h = h<10?'0'+h:h;
var m = parseInt(times / 60 %60);
m = m<10?'0'+m:m;
var s = parseInt(times %60);
s = s<10?'0'+s:s;
return d+'天'+ h +'时'+ m +'分'+ s +'秒';
}
console.log(countDown('2020-6-1 18:00:00'));
var date = new Date();
console.log(date);
document.write(countDown('2020-6-1 18:00:00')
</script>
</head>JQuery课程
练习1.引入JQuery + 选择页面元素 + 设置页面元素属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第六章JQuery</title>
<!-- 这是jquery方法 -->
<script type="text/javascript" src="jquery-3.5.1.js">
</script>
<!-- 这是css -->
<style type="text/css">
.div3{
width: 200px;
height: 200px;
background-color: dodgerblue;
}
.newdiv{
background-color: red;
}
</style>
</head>
<body>
<div id="div1">我在某一个清晨想起了你</div>
<div><span>不知道多久没有见你</span></div>
<div>我在秋天的梦里又看见了你</div>
<div>
<p id="p1">青春又醉倒在</p>
<p class="p2">藉藉无名的怀</p>
<p name="p3">再不见那夜里听歌的小孩</p>
</div>
<div class="div1">就老去吧，孤独别醒来</div>
<div class="div2">你渴望的离开，只是无处停摆</div>
<hr>
<p>账号；<input type="text" name="" id="text1" value="" /></p>
<p>密码：<input type="password" name="" id="password1" value=""/></p>
<p><input type="button" name="" id="button1" value="提交" /></p>
<p><input type="reset" name="" id="" value="重置" /></p>
<div class="div3" >展示js原生方法换标签属性值</div>
<input type="button" name="change" id="" value="改变样式" onclick="bian()" />
<!-- jquery设置 -->
<script type="text/javascript">
alert("弹窗");
$("#div1").css("font-style","italic");
$("span").css("font-weight","lighter");
$(".p2").css("color","blue");
$("[name]").css("font-size","30px");
//定义函数，每次单击就跳出弹窗
$(window).click(function()
{
alert("点击获得弹窗")
})
// 并集,交集选择器
$(".div1,.div2").css("width","100px").css("background","yellow");
$(".div1,.div2").css("height","100px");
//表单选择器
$(":input").css("background","pink");
</script>
<!-- 这是js原生方法 -->
<script type="text/javascript">
var a=document.getElementById("p1");
a.style.background="red";
a.style.fontSize="20px";
a.style.fontFamily="微软雅黑";
var b =document.getElementsByClassName(".js")
function bian(){
b.setAttribute("class",".newdiv")
}
</script>
</body>
</html>练习2.JQuery获取对象+访问、修改属性 练习
涉及知识：attr,removeattr prop, html , text , val
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>访问HTML元素</title>
<script type="text/javascript" src="jquery-3.5.1.js">
</script>
</head>
<body>
<div class="div1" value="这是div1的属性值">1.attr</div>
<div id="div2">2.removeattr</div>
<div name="div3">3.prop<input type="checkbox" name="" id="" value="" /></div>
<div class="div4"><span>4.html</span></div>
<div class="div5">5.text</div>
<div class="div6">6.val<input type="text" value="val()只能对表单含有输入域操作"></div>
<script type="text/javascript">
//访问HTML元素
//1.attr
//alert($(".div1").attr("class"))
//$(".div1").attr("class","这是div1新设置的属性值");
//alert($(".这是div1新设置的属性值").attr("class"));
//2.removeattr
//alert($("#div2").attr("id"));
//$("#div2").removeAttr("id");
//不传参数不删除
//alert($("#div2").attr("id"));
//3.prop
// alert($("div[name]").attr("name"));
// alert($("div[name]").prop("name"));
// $(document).ready(function() {
// $('input:checkbox').click(function() {
// alert($(this).attr('checked'));
// });
// });
// $(document).ready(function() {
// $('input:checkbox').click(function() {
// alert($(this).attr('checked'));
// });
// });
//4.html
//alert($(".div4").html());
//5.text
//alert($(".div4").text());
//6.val
alert($("input:text").val())
alert($("input:text").val("有参数就修改为新的值"));
//属性
</script>
</body>
</html>练习3. 添加页面节点 + 动画功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery第二次练习题</title>
<script type="text/javascript" src="jquery-3.5.1.js">
</script>
<style type="text/css">
#div1{
background-color: #D968C0;
}
#div2{
width: 1352px;
height: 600px;
background-color: aquamarine;
float: left;
}
#div2_inner{
width:100px;
height:100px;
background-color: #FF0000;
border: 1px solid;
clear: both;
position: relative;
}
#div_left input{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="div1">这是第一个div区域</div>
<p>这是段落1</p>
<p>这是段落2</p>
<p>这是段落3</p>
<p id="p1">这是段落4</p>
<p><input type="button" name="button1" id="" value="append添加新标签和内容" />
<input type="button" name="button2" id="" value="append参数为页面原有元素!" /></p>
<div id="">
<input type="button" name="button3" id="" value="after添加新标签和内容" />
<input type="button" name="button4" id="" value="after参数为页面原有元素" />
</div>
<hr>
<div id="div2">
<div id="div2_inner">
</div>
</div>
<div id="div_left">
<input type="button" name="" id="" value="暂停" />
<input type="button" name="" id="" value="继续" />
<input type="button" name="" id="" value="开始" /></div>
</body>
<script type="text/javascript">
//一、定义入口函数
// 1.
// $(document).ready(function(){
// //append 获取按钮1，点击添加页面没有标签和内容
// $("input[name = button1]").click(function(){
// $("body").append("<p>这是append添加的段落<\p>");
//1.1为了区分添加的位置，把匹配元素改成第一个div区域
$(document).ready(function(){
//append 获取按钮1，点击添加页面没有标签和内容
$("input[name = button1]").click(function(){
$("#div1").append("<p>这是append添加的段落<\p>");
//append 获取按钮2，点击传参页面中有的标签和内容
})
$("input[name = button2]").click(function(){
$("#div1").append($("#p1"));
});
//2.
//after 获取按钮3，点击添加页面没有的标签和内容
// $("input[name = button3]").click(function(){
// $("body").after("<p>这是after添加的段落<\p>");
// });
//2.1 为了区分添加的位置，把匹配元素改成第一个div区域
$("input[name = button3]").click(function(){
$("#div1").after("<p>这是after添加的段落<\p>");
});
//after 获取按钮4，点击传参页面中有的标签和内容
$("input[name = button4]").click(function(){
$("#div1").after($("#p1"));
})
});
//动画功能
//先隐藏暂停按钮
$("input[value = 暂停]").css("display","none");
//点击开始按钮，动画开始
$("input[value = 开始]").click(function(){
var res = confirm("是否动起来？^_^")
if( res == true){
$("#div2_inner").animate({left:"+666px",top:"+333px"},10000);
//点击开始后隐藏开始按钮
$("input[value = 开始]").css("display","none");
//动画开始显示暂停按钮
$("input[value = 暂停]").css("display","");
//点击暂停按钮，动画暂停
$("input[value = 暂停]").click(function(){
$("#div2_inner").stop();
//暂停之后隐藏暂停按钮
$("input[value = 暂停]").css("display","none");
//显示开始按钮
$("input[value = 开始]").css("display","");
});
}
});
</script>
</html>导航项目
涉及知识：动态效果，列表嵌套列表，点击显示隐藏导航，点击功能按钮发生变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>web设计实验代码分析</title>
<script src="jquery-3.5.1.js"></script>
<!-- 正确引入自己的jquery.js的位置-->
<style type="text/css">
/* 整体设置页面盒子,字体 */
*{
margin:0;
padding:0;
font-weight:400;
}
/* 取消列表的圆点 */
li {
list-style-type:none;
/* 垂直对齐方式 */
vertical-align:0;
}
/* 整个左侧导航盒子样式 */
.newHNavListBox
{
width:290px;
height:100%;
background:rgba(37,168,167,0.7);
position:absolute;
/* left:-290px; */
/* 定位元素和左外边距和左边界距离 */
/* top:0px; */
opacity:0;
/*透明度级别 ，去掉后 li 下面的横线会随着动画延缓消失*/
visibility:hidden;
/*使元素不可见，去掉后导航盒子背景点击不消失*/
z-index:100;
/* 指定堆叠顺序 */
}
/* 导航盒子里面的列表盒子 */
.newHNavListBox .navListBox
{
width:100%;
position:absolute;
/* 绝对定位 */
left:0px;
top:14%;
/* ul盒子距离外边盒子边界 */
}
/* 设置ul样式 */
.newHNavListBox .navListBox ul
{
width:208px;
margin-left:40px
}
/* 设置li的样式 */
.newHNavListBox .navListBox ul li
{
border-bottom:1px solid #5fdcd2;
/* 设置文字下面有个边框线 */
opacity:0;
/* 定义文字前面小三角旋转属性 */
-webkit-transform:translate(-40px, 0px);
transform:translate(-40px, 0px);
-webkit-transition:all 0s .35s;
transition:all 0s .35s;
/* 两个参数2D旋转 */
}
/* 设置外部li目录 */
.newHNavListBox .navListBox ul li h3
{
padding:5px 0px;
/* 上下,左右距离 */
}
.newHNavListBox .navListBox ul li h3 a
{
/* display:block; */
position:relative;
padding-left:15px;
/* a中文字距离三角的距离 */
font-size:16px;
color:#fff;
line-height:30px;
text-align:left
}
/* 设置在每个a元素之前插入内容 */
.newHNavListBox .navListBox ul li h3 a:before
{
content:"";
display:block;
border:6px solid transparent;
border-left-color:#fff;
position:absolute;
left:-3px;
top:50%;
margin-top:-6px
}
/* 设置li下的嵌套目录 */
.newHNavListBox .navListBox ul li dl
{
display:none;
/* 开始折叠不显示 */
padding:5px 0px;
/* 嵌套目录距离父li的距离 */
border-top:1px solid #5fdcd2
/* 设置dl线为实线 */
}
/* 嵌套列表的设置 */
.newHNavListBox .navListBox ul li dl dd
{
padding-left:25px;
font-size:14px;
color:#fff;
line-height:26px;
text-align:left
}
.newHNavListBox .navListBox ul li dl dd a
{
display:block;
color:#FFF
/* a的文字颜色 */
}
.newHNavListBox .navListBox ul li dl dd a:hover
{
text-decoration:underline ;
color: red;
}
/* 实现打开内层嵌套列表时,前面小三角旋转 */
.newHNavListBox .navListBox ul li.chost h3>a::before
{
border:6px solid transparent;
border-top-color:#fff;
margin-top:-2px
},
/* 后面Jquery设置点击外层的li,显示内层嵌套列表 */
.newHNavListBox .navListBox ul li.chost dl{display:block}
/* 设置显示导航盒子 */
.newHNavListBox.newHNavListBoxd
{
left:0px;
opacity:1;
visibility:visible
}
/* 设置显示导航盒子里的列表盒子 */
.newHNavListBox.newHNavListBoxd .navListBox ul li
{
opacity:1;
-webkit-transform:translate(0px, 0px);
transform:translate(0px, 0px);
-webkit-transition:all .4s .3s;
transition:all .4s .3s
}
/* 设置右上角的按钮,位置和外边框 */
.newNavButton{
-webkit-transition:all .3s 0s;
transition:all .3s 0s;
width:40px;
height:40px;
background:#fff;
border-radius:50%;
/* 圆角 */
position:absolute;
left:25px;
top:25px;
/* 当导航盒子消失后,圆形按钮跑到左边位置 */
cursor:pointer;
/* 定义了鼠标指针放在一个元素边界范围内时所用的光标形状,放在原型按钮时是小手 */
z-index:100;
box-shadow:0 0 5px rgba(0,0,0,0.6)
}
/* 设置按钮中间的一道横线，不是那个×*/
.newNavButton span
{
-webkit-transition:all .3s 0s;
transition:all .3s 0s;
display:block;
height:3px;
width:28px;
position:absolute;
background:#019ea1;
left:50%;
top:50%;
margin-left:-14px;
margin-top:-1.5px
}
/* 设计那个x的\和/ */
.newNavButton::before,.newNavButton::after
{
-webkit-transition:all .3s 0s;
transition:all .3s 0s;
content:"";
display:block;
width:22px;
height:3px;
position:absolute;
background:#019ea1;
left:50%;
top:50%;
margin-left:-11px;
margin-top:-1.5px
}
/* 上面的第一道横线 */
.newNavButton::before
{margin-top:-8.5px}
/* 下面的第三道横线 */
.newNavButton::after
{margin-top:5.5px}
/* 设置圆形按钮从左到右动画效果 */
.newNavButton.newNavButtond
{
left:270px
}
/* 设置显示X的时候不显示中间的那一道横线 */
.newNavButton.newNavButtond span{
opacity:0
}
/* 设置是规则的X形状 */
.newNavButton.newNavButtond::before,.newNavButton.newNavButtond::after
{margin-top:-1.5px}
.newNavButton.newNavButtond::before
{
-webkit-transform:rotate(45deg);
transform:rotate(45deg)
}
.newNavButton.newNavButtond::after
{
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg)
}
/* 控制5个li不同速度从左边进入 */
.newHNavListBox.newHNavListBoxd .navListBox ul li:nth-child(2)
{
-webkit-transition:all .4s .5s;
transition:all .4s .5s
}
.newHNavListBox.newHNavListBoxd .navListBox ul li:nth-child(3)
{
-webkit-transition:all .4s .7s;
transition:all .4s .7s
}
.newHNavListBox.newHNavListBoxd .navListBox ul li:nth-child(4)
{
-webkit-transition:all .4s .9s;
transition:all .4s .9s
}
.newHNavListBox.newHNavListBoxd .navListBox ul li:nth-child(5)
{
-webkit-transition:all .4s 1.1s;
transition:all .4s 1.1s
}
</style>
<body style="width: 900px; height: 708px;">
<!-- 总布局就是三个小盒子 -->
<!-- 左侧导航 -->
<div class="newHNavListBox newHNavListBoxd">
<div class="navListBox">
<ul>
<li><h3><a href="LunBo_Demo_test/LunBo_demo.html" target="_blank">图片轮播</a></h3></li>
<li><h3><a href="javascript:void(0);" name="a1" onclick="return false;">学校概况</a></h3>
<dl class="bavrger">
<dd><a href="" >河大概况</a></dd>
<dd><a href="" >河南大学校歌</a></dd>
<dd><a href="" >校园风光</a></dd>
<dd><a href="" >校园示意图</a></dd>
</dl>
</li>
<li><h3><a href="javascript:void(0);" name="a1" onclick="return false;">院系部门</a></h3>
<dl class="bavrger">
<dd><a href="">院校部门</a></dd>
<dd><a href="">组织结构</a></dd>
<dd><a href="">科研机构</a></dd>
</dl>
</li>
<li><h3><a href="javascript:void(0);" name="a1" onclick="return false;">人才培养</a></h3>
<dl class="bavrger">
<dd><a href="" >本科生培养</a></dd>
<dd><a href="" >研究生培养</a></dd>
</dl>
</li>
<li><h3><a href="javascript:void(0);" name="a1" onclick="return false;">师资队伍</a></h3>
<dl class="bavrger">
<dd><a href="">院士风采</a></dd>
<dd><a href="">长江学者</a></dd>
<dd><a href="">国家杰青</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<div class="newNavButton newNavButtond"><span></span></div>
<!-- 中间按钮，显示或隐藏-->
<div style="width:100%; height:100%;" id="gzh"> </div>
<!-- 右侧 -->
</body>
</html>
<script type="text/javascript">
// 点击按钮,导航盒子显示取反,按钮样式取反
$(".newNavButton").click(function(){
if($(this).hasClass("newNavButtond")){
$(this).removeClass("newNavButtond");
$(".newHNavListBox").removeClass("newHNavListBoxd");
}else{
$(this).addClass("newNavButtond");
$(".newHNavListBox").addClass("newHNavListBoxd");
}
});
//点击外层的li 显示嵌套菜单，旋转小三角
//实现方法是：如果父元素没有这个能显示的类，就添加一个class = chost,有就去除
$(".navListBox li h3").click(function(){
if($(this).parent().hasClass("chost")){
$(this).parent().removeClass("chost");
}else{
// siblings 方法返回被选元素的所有同级元素。所有的li
$(this).parent().addClass("chost").siblings().removeClass("chost");
}
})
</script>
