jQuery+CSS实现标签分栏切换（附代码）
程序员文章站
2022-05-31 08:25:41
...
这次给大家带来jQuery+CSS实现标签分栏切换（附代码），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;
}
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+CSS实现标签分栏切换（附代码）的详细内容，更多请关注其它相关文章！