jQuery CSS实现滑动的标签分栏切换效果

本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果。分享给大家供大家参考。具体如下：

运行代码如下

具体代码如下

超文本标记语言标题标题jQuery平滑滚动的标签分栏切换/title meta charset=' GB 2312 ' style ul，Li { margin :0 pxpadding :0 pxlist-style : none } Li { float : left；背景-颜色： # 8c 6239颜色：白色；padding:5px右边距：2 pxborder:1px纯白色；}李。myli {底色： # ea 5500border:1px固体# ea5500} div { clear:left背景-颜色： # ea 5500颜色：白色；宽度宽度：300像素高度：100 pxpadd :10 pxdisplay : none } div。MyDiv {显示：块；}/样式脚本src='http:/jquery-1。7 .1 .量滴js /脚本脚本var timeId$(文档)。ready(function(){ $('li ')).每个（函数（索引){//索引是里数组的的索引值$(这个)。将鼠标悬停在(function(){ var LiNode=$(this)上；//延迟是为了减少服务器压力，防止鼠标快速滑动timeId=setTimeout(函数(){ //将原来显示的差异隐藏掉$('div.myDiv ').移除类(' MyDiv ')；//将原来的里的myLi去掉$('li.myLi ').移除类(' myLi ')；//显示当前鼠标里的对应的div $('div ').eq(指数)。添加类(' MyDiv ')；//增加当前里的米丽利诺德。add class(' myLi ')；},300);}).鼠标移出(function(){ clear TiME out(TiME id))；});});});/脚本/头体ul Li class=' myLi '这是李李是李2/李是li 3/li /ul div class='myDiv '这是第1分区/第2分区这是第2分区/第3分区这是div3/div /body/html希望本文所述对大家的jquery程序设计有所帮助。