js上课小案例，多个选项卡，有的是鼠标经过，有的是鼠标点击。利用函数传参实现代码复用。

具体效果点击查看

1、html代码

<div class="container tab0">
<div class="title">
<ul>
<li><a href="#">收藏最多</a></li>
<li><a href="#">热门话题</a></li>
<li><a href="#">猜你喜欢</a></li>
</ul>
</div>
<div class="content">
<ul>
<li>
<span>1</span><a href="#">我花了3天时间，为你整理了这份超全面的 B 站免费学设计指南</a>
</li>
<li><span>2</span><a href="#">为什么你的 PS 越用越快，但设计水平一直没有提升？</a></li>
<li><span>3</span><a href="#">比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）</a></li>
<li><span>4</span><a href="#">标题文字如何处理更吸引人？来看设计高手的实用技巧！</a></li>
<li><span>5</span><a href="#">为什么你的界面看着不舒服？腾讯设计师从这 3 个维度优化设计！</a></li>
<li><span>6</span><a href="#">平面高手课堂！用一篇干货帮你彻底全面掌握「投影」知识点！</a></li>
<li><span>7</span><a href="#">我花了3天时间，整理了这15个「特别好」的免费可商用图库！</a></li>
<li><span>8</span><a href="#">提高求职成功率？这份大厂设计师出品的面试指南刚好用得上！</a></li>
</ul>
<ul>
...
</ul>
<ul>
...
</ul>
</div>
</div>
<div class="container tab1">
<div class="title">
<ul>
<li><a href="#">收藏最多</a></li>
<li><a href="#">热门话题</a></li>
</ul>
</div>
<div class="content">
<ul>
<li>
<span>1</span><a href="#">我花了3天时间，为你整理了这份超全面的 B 站免费学设计指南</a>
</li>
<li><span>2</span><a href="#">为什么你的 PS 越用越快，但设计水平一直没有提升？</a></li>
<li><span>3</span><a href="#">比阿里犸良还强大！Lottie 动效设计完全指南（基础篇）</a></li>
<li><span>4</span><a href="#">标题文字如何处理更吸引人？来看设计高手的实用技巧！</a></li>
<li><span>5</span><a href="#">为什么你的界面看着不舒服？腾讯设计师从这 3 个维度优化设计！</a></li>
<li><span>6</span><a href="#">平面高手课堂！用一篇干货帮你彻底全面掌握「投影」知识点！</a></li>
<li><span>7</span><a href="#">我花了3天时间，整理了这15个「特别好」的免费可商用图库！</a></li>
<li><span>8</span><a href="#">提高求职成功率？这份大厂设计师出品的面试指南刚好用得上！</a></li>
</ul>
<ul>
...
</ul>

</div>
</div>

2、css代码

* {
box-sizing: border-box;
}

body,
ul,
li {
margin: 0;
padding: 0;

}

li {
list-style: none;
}

a {
color: #8a8a8a;
text-decoration: none;
}

a:hover {
color: #333;
}

.hidden {
display: none;
}

.container {
width: 270px;
margin: 20px;
float: left;
}

.title {
margin-bottom: 12px;
}

.title ul {
display: flex;
}

.title li {
flex-basis: 33.33%;
background-color: #f2f2f2;
padding: 10px 13px;
font-size: 0.875rem;
text-align: center;
}

.title li.active {
background-color: #fe4800;
}

.title li.active a {
color: #fff;
}

.content li {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 0.875rem;
}

.content span {
background-color: #c8c7c7;
border-radius: 3px;
color: #fff;
font-size: 0.75rem;
padding: 1px 6px;
text-align: center;
margin-right: 5px;
}

.content a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.content li:nth-child(-n+3) span {
background-color: #fe4800;
color: #fff;
}

.content i {
font-style: normal;
font-size: 0.75rem;
color: #d3d3d3;
padding-left: 5px;
}

3、js代码

<script>
var oTab = document.querySelectorAll("[class*=tab]");
// console.log(oTab)
tab(oTab[0],"onclick");
tab(oTab[1],"onmouseover");


function tab(obj,evt) {
var oLi = obj.querySelectorAll(".title li");
var oUl = obj.querySelectorAll(".content ul");
// console.log(oUl);

//初始化
var num = 0;
var oldLi = null;
oLi[num].classList.add("active");
oldLi = oLi[num];
oUl.forEach(function (item, index) {
if (!(num == index)) {
item.classList.add("hidden");
// console.log(index);
}
})

oLi.forEach(function (item, index) {
item[evt] = function () {
/*  oLi.forEach(function (item) {
                         item.classList.remove("active");
                     }) */
oldLi.classList.remove("active");
this.classList.add("active");
oldLi = this;
//  先把所有ul隐藏
oUl.forEach(function (item) {
item.classList.add("hidden");
})
// 再把鼠标经过的那个li对应的ul显示
oUl[index].classList.remove("hidden");

}
})
}
</script>