image.png
实现点击标题，内容切换
内容较少的时候（目前假设没有设计for的情况）
<p class="tab">
<span class="active" onclick="go(0)">web前端</span>
<span onclick="go(1)">c++</span>
<span onclick="go(2)">java</span>
</p>
<hr>
<div class="box">
<div class="item course1" style="display: flex;">
web前端课程
</div>
<div class="item course2">
c++课程
</div>
<div class="item course3">
java课程
</div>
</div>
<script>
function go(num){
var item=document.querySelectorAll('.item')
var lis=document.querySelectorAll('.tab span')
lis[0].className=''
lis[1].className=''
lis[2].className=''
lis[num].className='active'
item[0].style.display='none'
item[1].style.display='none'
item[2].style.display='none'
item[num].style.display='flex'
}
</script>
