html怎么设置分栏效果,jQuery+CSS实现滑动的标签分栏切换效果

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

运行代码如下

具体代码如下

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;

}

div{

clear:left;

background-color:#ea5500;

color:white;

width:300px;

height:100px;

padding:10px;

display:none;

}

div.myDiv{

display:block;

}

var timeId;

$(document).ready(function(){

$("li").each(function(index){

//index是li数组的的索引值

$(this).mouseover(function(){

var liNode = $(this);

//延迟是为了减少服务器压力，防止鼠标快速滑动

timeId = setTimeout(function(){

//将原来显示的div隐藏掉

$("div.myDiv").removeClass("myDiv");

//将原来的li的myLi去掉

$("li.myLi").removeClass("myLi");

//显示当前鼠标li的对应的div

$("div").eq(index).addClass("myDiv");

//增加当前li的myLi

liNode.addClass("myLi");

},300);

}).mouseout(function(){

clearTimeout(timeId);

});

});

});

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

this is div1

this is div2

this is div3

希望本文所述对大家的jquery程序设计有所帮助。