本文的JS效果是在鼠标点击ITEM标签的时候,实现下方的内容跟随滚动切换的效果,我们先来看下运行后的效果图。
以下是考高分网原创的运行代码:
jQuery实现的平滑滚动选项卡 .tabs{width: 1200px; margin: 0 auto; height: 336px; overflow: hidden;} .tabs_item{height: 36px;} .tabs_block{height: 300px;} .list_item{float: left; width: 200px; height: 36px; line-height: 36px; font-size: 26px; text-align: center;background-color:#FC0;cursor: pointer;} .list_item.active{color: #FFF;background-color:#F60} .tabs_block{width: 20000px; position: relative;} .list_block{display: none; float: left; width: 1200px; height: 300px; font-size: 100px; text-align: center; line-height: 300px;background-color:#F4F4F4} .list_block.show{display: block;} list item 1 list item 2 list item 3 list item 4 list item 5 list item 6 list block 1 list block 2 list block 3 list block 4 list block 5 list block 6 更多代码请访问:考高分网
在代码中我们引用了百度的jquery
需要的朋友跟着学习下吧,感谢你对考高分网的支持。



