网友经常问我怎么用css+js实现tab切换效果,小糊涂成品网站在这里教大家一种经常用到的方法

主要html代码如下

<div class="case_box">
    <div class="category">
        <ul>
            <li class="active">大朴</li>
            <li>多丽城跨境电商</li>
            <li>茶小样</li>
            <li>可得福</li>
            <li>微品农社</li>
        </ul>
    </div>
    <div class="content">
        <div class="cont active">
        </div>
        <div class="cont">
        </div>
        <div class="cont">
        </div>
        <div class="cont">
        </div>
        <div class="cont">
        </div>
    </div>
</div>

主要css代码如下

.case_box .category ul li { 
	color: #939aac; 
} 
.case_box .category ul li.active {
	color: #fff;
	background: #4f77fc;
}
.case_box .content .cont { 
	display: none;
} 
.case_box .content .cont.active {
	display: block;
}

用jquery库时一定得记得引用jquery文件,不然浏览器不识别用jquery编写的代码,主要js代码如下

<script type="text/javascript">
    $(function () {
        $('.category ul li').click(function () {
            var i = $(this).index();
            $(this).addClass('active').siblings().removeClass('active');
            $('.content .cont').eq(i).addClass('active').siblings().removeClass('active');
        })
    });
</script>

实现的效果图如下

企业网站源码下载,医疔保健网站,美容护肤网站,品牌产品网站,营销网站,机械电子网站,教育培训网站,食品餐饮网站,养殖化工网站,整站模板带数据下载

到此完成,js写的真是复杂,还得考虑兼容,不过为了找到更好的工作,为了赚更多的钱,还是好好努力学习js吧,基础打扎实,不管以后出什么框架,去学习都不会有太大问题