jquery小实验

最新推荐文章于 2022-12-11 16:06:27 发布

0x223522

最新推荐文章于 2022-12-11 16:06:27 发布

阅读量366

点赞数

分类专栏：重中之重文章标签： js html jquery

本文链接：https://blog.youkuaiyun.com/qq_40885034/article/details/96571190

版权

重中之重专栏收录该内容

2 篇文章

订阅专栏

刚学完jquery便动手做了一个小示例
成品如下：
在这里插入图片描述

List item

具体操作就是当鼠标移到顶部的菜单栏时，下边的内容会改变。
内容有点简陋，只当笑谈。(-_-)

tip：本人懒，不做注释(-=_=-)
代码如下：

在这里插入代码片
<html><head><meta charset="utf-8"><script src="jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				
				$("html").after("<body></body>");
				$("html").css("margin","0").css({"width":"100%","height":"100%"});
				$("body").css("margin","0");
				$("body").append("<div id=\"header\"></div>");
				$("#header").append("<ul class=\"category clearfix\"></ul>").css({"width":"100%","height":"34px","background-color":"#7FAD5D","margin":"0 auto"});
				for(var i = 0;i < 6;i++){
					$("#header ul").append("<li></li>");
				}
				
				$("#header ul").css("list-style-type","none").css({"margin-left":"100px"});
				$("#header ul li").css("float","left").css({"height":"30px","width":"100px","display":"block","background-color":"#C6F0A7","margin-left":"10px","text-align":"center","line-height":"30px","margin-top":"4px"});
				$("#header ul li:eq(0)").text("在线学习").mouseenter(function(){
					$(this).css({"background-color":"white"});
					for(var i = 1;i < 7;i++){
						if(i==1){
							$("#d"+i).css({"display":"block"});
						}else{
							$("#d"+i).css({"display":"none"});
						}
						
					}
				}).mouseleave(function(){
					$(this).css({"background-color":"#C6F0A7"});
				});
				$("#header ul li:eq(1)").text("培训中心").mouseenter(function(){
					$(this).css({"background-color":"white"});
					for(var i = 1;i < 7;i++){
						if(i==2){
							$("#d"+i).css({"display":"block"});
						}else{
							$("#d"+i).css({"display":"none"});
							
						}
						
					}
				}).mouseleave(function(){
					$(this).css({"background-color":"#C6F0A7"});
				});
				$("#header ul li:eq(2)").text("软技能课程").mouseenter(function(){
					$(this).css({"background-color":"white"});
					for(var i = 1;i < 7;i++){
						if(i==3){
							$("#d"+i).css({"display":"block"});
						}else{
							$("#d"+i).css({"display":"none"});
							
						}
						
					}
				}).mouseleave(function(){
					$(this).css({"background-color":"#C6F0A7"});
				});
				$("#header ul li:eq(3)").text("项目展示").mouseenter(function(){
					$(this).css({"background-color":"white"});
					for(var i = 1;i < 7;i++){
						if(i==4){
							$("#d"+i).css({"display":"block"});
						}else{
							$("#d"+i).css({"display":"none"});
							
						}
						
					}
				}).mouseleave(function(){
					$(this).css({"background-color":"#C6F0A7"});
				});
				$("#header ul li:eq(4)").text("编程社区").mouseenter(function(){
					$(this).css({"background-color":"white"});
					for(var i = 1;i < 7;i++){
						if(i==5){
							$("#d"+i).css({"display":"block"});
						}else{
							$("#d"+i).css({"display":"none"});
							
						}
						
					}
				}).mouseleave(function(){
					$(this).css({"background-color":"#C6F0A7"});
				});
				$("#header ul li:eq(5)").text("联系我们").mouseenter(function(){
					$(this).css({"background-color":"white"});
					for(var i = 1;i < 7;i++){
						if(i==6){
							$("#d"+i).css({"display":"block"});
						}else{
							$("#d"+i).css({"display":"none"});
							
						}
						
					}
				}).mouseleave(function(){
					$(this).css({"background-color":"#C6F0A7"});
				});
				
				$("body").after("<div id=\"d1\"></div>");
				$("body").after("<div id=\"d2\"></div>");
				$("body").after("<div id=\"d3\"></div>");
				$("body").after("<div id=\"d4\"></div>");
				$("body").after("<div id=\"d5\"></div>");
				$("body").after("<div id=\"d6\"></div>");
				var colors = ["pink","pink","pink","pink","pink","pink"];
				var texts = ["天","行","建","地","势","坤"];
				for(var i = 1;i < 7;i++){
					$("#d"+i).css({"background-color":colors[i-1],"width":"100%","height":"600px"});
				}
				for(var i = 1;i < 7;i++){

					$("#d"+i).text(texts[i-1]).css({"text-align":"center","line-height":"600px","font-size":"400px"});

				}
				for(var i = 2;i < 7;i++){
					$("#d"+i).css({"display":"none"});
				}
			});
</script></head></html>