根据标题显示相应的内容，即实现遍历
实现功能：
鼠标经过时，标题可以发生颜色的变化，下面显示的内容变为该标题所对应的内容。
实现代码：
1.HTML：
<body>
<div class="dl">
<div class="list">
<div class="List active">列表1</div>
<div class="List">列表2</div>
<div class="List">列表3</div>
<div class="List">列表4</div>
<div class="List">列表5</div>
<div class="List">列表6</div>
<div class="List">列表7</div>
</div>
<div class="content">
<div class="Content">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈1</div>
<div class="Content hide">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈2</div>
<div class="Content hide">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈3</div>
<div class="Content hide">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈4</div>
<div class="Content hide">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈5</div>
<div class="Content hide">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈6</div>
<div class="Content hide">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈7</div>
</div>
</div>
</body>
2.css：
<style>
*{
padding:0;
margin:0;
}
.dl{
position:fixed;
700px;
}
.List{
100px;
height:40px;
background-color:pink;
float:left;
cursor:pointer;
text-align:center;
}
.Content{
100%;
height:200px;
background-color:brown;
color:white;
}
.active{
background-color:red;
}
.hide{
display:none;
}
</style>
3.js：
在写js代码之前需要引进你本地上的jQuery，也就是js库。
<script src="jquery-3.3.1.min.js"></script>
<script>
$("document").ready(function(){
$(".List").mouseover(function(){
$(this).addClass("active").siblings().removeClass("active");
var v = $(this).index();
$(".Content").eq(v).removeClass("hide").siblings().addClass("hide");
});
});
</script>
注意：
通过给当前元素增加/去除类，同时给自己的同胞元素去除/增加类来完成。其实是实现了css与js的分离，css负责样式的实现，js负责给元素分配相应的类。
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } .dl{ position:fixed; width:700px; } .List{ width:100px; height:40px; background-color:pink; float:left; cursor:pointer; text-align:center; } .Content{ width:100%; height:200px; background-color:brown; color:white; } .active{ background-color:red; } .hide{ display:none; } </style> <script src="jquery-3.3.1.min.js"></script> <script> $("document").ready(function(){ $(".List").mouseover(function(){ $(this).addClass("active").siblings().removeClass("active"); var v = $(this).index(); $(".Content").eq(v).removeClass("hide").siblings().addClass("hide"); }); }); </script> </head> <body> <div class="dl"> <div class="list"> <div class="List active">列表1</div> <div class="List">列表2</div> <div class="List">列表3</div> <div class="List">列表4</div> <div class="List">列表5</div> <div class="List">列表6</div> <div class="List">列表7</div> </div> <div class="content"> <div class="Content">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈1</div> <div class="Content hide">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈2</div> <div class="Content hide">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈3</div> <div class="Content hide">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈4</div> <div class="Content hide">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈5</div> <div class="Content hide">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈6</div> <div class="Content hide">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈7</div> </div> </div> </body> </html>