tab切换样式（tab选项卡切换不同图片代码）

想必现在有很多小伙伴对于tab选项卡切换不同图片代码方面的知识都比较想要了解，那么今天小好小编就为大家收集了一些关于tab选项卡切换不同图片代码方面的知识分享给大家，希望大家会喜欢哦。

新建html文档。

准备好需要用到的图标。

书写hmtl代码。产品1.1品名：11111规格：36.25KG/支原料：222更多产品1.2品名：1111规格：36.25KG/支原料：2222更多产品2.1品名：1111规格：36.25KG/支原料：222更多产品2.2品名：1111规格：36.25KG/支原料：222更多产品3.1品名：1111规格：36.25KG/支原料：222更多产品3.2品名：1111规格：36.25KG/支原料：222更多产品4.1品名：站长素材规格：36.25KG/支原料：222更多产品4.2品名：1111规格：36.25KG/支原料：222更多

未经路芝士回答允作许不得转原载本习文内容，否则将展视为侵权

书写css代码。.slideGroup { margin: 0 auto; width: 1000px; height: 500px; }.slideGroup .parHd { position: relative; height: 100px; line-height: 100px; padding: 0 20px; }.slideGroup .parHd ul { display: table; margin: 0 auto; }.slideGroup .parHd ul li { float: left; padding: 0 15px; cursor: pointer; }.slideGroup .parHd ul li.on { height: 30px; background: #fff; color: green; }.slideGroup .slideBox { overflow: hidden; zoom: 1; padding: 10px 0 10px 100px; position: relative; }.slideGroup .sPrev, .slideGroup .sNext { position: absolute; left: 5px; top: 10px; display: block; width: 54px; height: 385px; background: url(../img/icoLeft.png) center center no-repeat; }.slideGroup .sNext { left: auto; right: 5px; background: url(../img/icoRight.png) center center no-repeat; }.slideGroup .parBd ul { overflow: hidden; zoom: 1; }.slideGroup .parBd ul li { margin: 0 8px; float: left; width: 800px; position: relative; }.slideGroup .parBd ul li .pic { text-align: center; }.slideGroup .parBd ul li .pic img { width: 450px; height: 385px; display: block; padding: 2px; }.slideGroup .parBd ul li .description { position: absolute; width: 280px; height: 145px; background: #372d2b; padding: 20px 10px 10px 20px; top: 120px; left: 420px; color: #fff }.slideGroup .parBd ul li .description h4 { color: #cca552; height: 40px; line-height: 40px; }.slideGroup .parBd ul li .description a { color: #fff; float: right; margin-top: 10px; background: #7c0002; border-radius: 5px; padding: 3px 10px; }

书写并添加js代码。jQuery(".slideGroup .slideBox").slide({mainCell:"ul",vis: 1,prevCell:".sPrev",nextCell:".sNext",effect:"leftLoop"});jQuery(".slideGroup").slide({titCell:".parHd li",mainCell:".parBd",trigger:"click"});

代码整体结构。

查看效果。

本文到此结束，希望对大家有所帮助。