remenkechengtuisong
/
index.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/CourseTuiSong.css" />
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript">
			window.onload = firstCourse;
			//让第一类课程的6个热门课程显示出来，所有的课程得display默认都是none的
			function firstCourse() {
				var divid = imglist.getElementsByTagName("div");
				divid[0].style.display = "block";

			}
			/** 每个课程的推荐课程最多6个，此方方法是当鼠标移动到那个课程分类时其他的课程都隐藏，值该类课程的6门课程*/
			$(document).ready(function() {
				$("#coursefenlei li").mouseover(function() {
					var index = this.id; //获得此处li的 id
					var imglist = document.getElementById("imglist");
					var divid = imglist.getElementsByTagName("div");
					var count = divid.length; //获得imglist下div的数量
					var name1 = index.replace(/[a-zA-Z]/g, ""); //正则表达式去掉id中的字母

					for(i = 0; i < count; i++) {
						var name2 = divid[i].id.replace(/[a-zA-Z]/g, "");

						if(name1 == name2) {
							divid[i].style.display = "block";
						} else {
							divid[i].style.display = "none";
						}
					}

				});
			});
		</script>
	</head>

	<body>
		<!--课程的类别-->
		<ul id="coursefenlei">
			<p>热门课程推送</p>
			<li id="1l">物理</li>
			<li id="2l">计算机</li>
			<li id="3l">数学</li>
			<li id="4l">生物 </li>
		</ul>
		<!--所有课程-->
		<ul id="imglist">
			<!--每个课程的类的6个的热门课程都放在一个div中-->
			<div id="1d">

				<li>
					<span><img src="imgs/img01.png"/></span>
					<h2><a href="#">物理</a></h2>
				</li>

				<li>
					<span><img src="imgs/img01.png" /></span>
					<h2><a href="#">物理</a></h2>
				</li>

				<li>
					<span><img src="imgs/img01.png" /></span>
					<h2><a href="#">物理</a></h2>
				</li>

				<li>
					<span><img src="imgs/img01.png" /></span>
					<h2><a href="#">物理</a></h2>
				</li>

				<li>
					<span><img src="imgs/img01.png" /></span>
					<h2><a href="#">物理</a></h2>
				</li>

				<li>
					<span><img src="imgs/img01.png" /></span>
					<h2><a href="#">物理</a></h2>
				</li>
			</div>

			<div id="2d">
				<li>
					<span><img src="imgs/img01.png" /></span>
					<h2><a href="#">化学</a></h2>
				</li>

				<li>
					<span><img src="imgs/img01.png" /></span>
					<h2><a href="#">化学</a></h2>
				</li>

				<li>
					<span><img src="imgs/img01.png" /></span>
					<h2><a href="#">日历组件样式设计</a></h2>
				</li>
				<li>
					<span><img src="imgs/img01.png" /></span>
					<h2><a href="#">日历组件样式设计</a></h2>
				</li>
			</div>
		</ul>

	</body>

</html>