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

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

运行代码如下

具体代码如下

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

}

div{

clear:left;

background-color:#ea5500;

color:white;

width:300px;

height:100px;

padding:10px;

display:none;

}

div.myDiv{

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(){

//将原来显示的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);

});

});

});

</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>

<div class="myDiv">this is div1</div>

<div>this is div2</div>

<div>this is div3</div>

</body>

</html>

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