运行代码如下
具体代码如下
<html> <head> <title>jquery平滑滚动的标签分栏切换</title> <meta charset="gb2312"> <style> ul,li{ margin:0px; padding:0px; list-style:none } li{ float:left; background-color:#8c6239; color:white; padding:5px; margin-right:2px; border:1px solid white; } li.myli{ background-color:#ea5500; border:1px solid #ea5500; } p{ clear:left; background-color:#ea5500; color:white; width:300px; height:100px; padding:10px; display:none; } p.myp{ display:block; } </style> <script src="./jquery-1.7.1.min.js"></script> <script> var timeid; $(document).ready(function(){ $(li).each(function(index){ //index是li数组的的索引值 $(this).mouseover(function(){ var linode = $(this); //延迟是为了减少服务器压力，防止鼠标快速滑动 timeid = settimeout(function(){ //将原来显示的p隐藏掉 $(p.myp).removeclass(myp); //将原来的li的myli去掉 $(li.myli).removeclass(myli); //显示当前鼠标li的对应的p $(p).eq(index).addclass(myp); //增加当前li的myli linode.addclass(myli); },300); }).mouseout(function(){ cleartimeout(timeid); }); }); }); </script> </head> <body> <ul> <li class="myli">this is li 1</li> <li>this is li 2</li> <li>this is li 3</li> </ul> <p class="myp">this is p1</p> <p>this is p2</p> <p>this is p3</p> </body> </html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery实现元素拖动排序（附代码）
jquery+ajax实现表格数据标题排序
以上就是jquery+css实现标签分栏切换（附代码）的详细内容。