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>