分栏信息php源码,jQuery+CSS实现标签分栏切换（附代码）

这次给大家带来jQuery+CSS实现标签分栏切换(附代码)，jQuery+CSS实现标签分栏切换的注意事项有哪些，下面就是实战案例，一起来看一下。

运行代码如下

具体代码如下

jQuery平滑滚动的标签分栏切换

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;

}

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);

});

});

});

• this is li 1
• this is li 2
• this is li 3

this is p1

this is p2

this is p3

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：