js选项卡
很常用的一个小功能，鼠标移动到某个li上面，或者标签上面，就跟着切换内容。
<style>
ul,li{
margin:0;
padding:0;
list-style: none;
}
ul{
overflow: hidden;
}
li{
width: 100px;
height: 40px;
background-color: #eee;
border: 1px solid #ccc;
float: left;
line-height: 40px;
text-align: center;
}
div{
width: 406px;
height: 406px;
border: 1px solid #ccc;
}
img{
width: 406px;
height: 406px;
display: none;
}
</style>
<body>
<ul>
<li>大橘</li>
<li>英短</li>
<li>美短</li>
<li>布偶</li>
</ul>
<div>
<img src="./ju.jpg" alt="" style="display: block;">
<img src="./ying.jpg" alt="">
<img src="./hu.jpg" alt="">
<img src="./bu.jpg" alt="">
</div>
<script type="text/javascript">
// 先获取li和img
let li = document.getElementsByTagName('li');
let img = document.getElementsByTagName('img');
// 遍历每个li
for(let i=0;i<li.length;i++){
li[i].index = i;
// 当鼠标移动到上面
li[i].onmouseover = function(){
// 改变当前li的颜色
this.style.backgroundColor = 'yellow';
// 遍历每一个img，设置display，隐藏
for(let j=0;j<img.length;j++){
img[j].style.display = 'none';
}
// this.index相当于当前正在遍历的li
console.log(this.index = i);
img[this.index].style.display = 'block';
}
// 当我们鼠标移出后改变颜色
li[i].onmouseout = function(){
li[i].style.backgroundColor = '#eee';
}
}
</script>
</body>
