jq实现tab切换

1、按钮与显示框利用each循环遍历

<script>
        $('.switch-box').click(function(e){
            $(this).addClass('switch-active')
            $(this).siblings().removeClass('switch-active')
            let tabId = e.currentTarget.dataset.id
            $('.page-contain').each(function(index,item){
                if(item.dataset.id == tabId){
                    $(item).addClass('contain-active')
                    $(item).siblings().removeClass('contain-active')
                }
            })
            $('.pagebanner-img').each(function(index,item){
                if(item.dataset.id == tabId){
                    $(item).addClass('pagebanner-img-viseble')
                    $(item).siblings().removeClass('pagebanner-img-viseble')
                }
            })
        })
    </script>

2、遍历同时分别加上了代表显示隐藏的类名

<style>
        .page-contain {
            display: none;
        }
        .page-contain.contain-active {
            display: block;
        }
        .pagebanner-img {
	        display: none;
	    }
	    .pagebanner-img.pagebanner-img-viseble {
	        display: block;
	    }
</style>

3、附上部分css代码

<div class="pagebanner-img">
    <img src="../dist/img/singlePage/images/capability-banner_02.jpg" alt="">
</div>

<div class="switch">
        <div class="container">
            <div class="switch-contain">
                <div class="switch-box switch-active">
                    <a href="capability.html"><span>Process Capability</span></a>
                </div>
                <div class="switch-box">
                    <a href="material.html"><span>Material Warehouse</span></a>
                </div>
                <div class="switch-box">
                    <a href="surface.html"><span>Surface Treatment</span></a>
                </div>
                <div class="switch-box">
                    <a href="helpCenter.html"><span>Help Center</span></a>
                </div>
            </div>
        </div>
</div>

<div class="page-contain">

</div>

4、实现了点击按钮切换不同的图片和主要显示内容

5、完结。