基于JQuery的多标签实现代码_jquery-js教程-PHP中文网

基于JQuery的多标签实现代码_jquery

php中文网

发布： 2016-05-16 17:49:54

原创

1243人浏览过

今天要分享的是基于JQuery实现的多标签的切换，JQuery就不用过多介绍了，网上一搜一大堆资料，当然这样的小示例也有很多，这里只是发表一些自己的想法。

下面是本次示例所使用的HTML页面：

mallcloud商城

mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提

查看详情

复制代码代码如下:

JQueryProject1

标签1

标签2

标签3

这是内容1

这是内容2

这是内容3

现在的页面还看不出有有标签的效果，所以为了使页面上出现标签效果，给一面添加一个CSS文件：

复制代码代码如下:

 
a{ 
display: block; 
text-decoration: none; 
color:white; 
} 
#contenTab ul{ 
list-style: none; 
padding:0px; 
margin:0px; 
} 
#content div.showContent{ 
line-height:100px; 
display: block; 
background-color:#B0C4DE; 
} 
.showTab{ 
background-color:#B0C4DE; 
border-bottom: 1px solid #B0C4DE; 
} 
div li{ 
background-color:#5F9EA0; 
border-bottom: 1px solid white; 
float: left; 
border-right: 1px solid white; 
color:black; 
height:30px; 
width:60px; 
line-height: 30px; 
text-align: center; 
} 
#content div{ 
background-color:#B0C4DE; 
display:none; 
clear: left; 
width:300px; 
height: 100px; 
} 

到目前为止页面还只是静态页面，接下来就是最主要的的部分了，这部分就是实现通过鼠标移动来切换标签，实现动态页面，为了达到这个目的需要再添加一个JS文件，当然基于JQuery就必然少不了JQuery的JS文件，本示例使用的是最新的jquery-1.8.1.min.js，可以到JQuery的官网获得，下面是本次示例中实现标签切换的JS代码：

复制代码代码如下:

 
$(function(){ 
$("#contenTab li").each(function(){ 
var tab = $(this); 
var timeoutID; 
tab.hover(function(){ 
timeoutID = setTimeout(function(){ 
$(".showTab").removeClass("showTab"); 
$(".showContent").removeClass("showContent"); 
tab.addClass("showTab"); 
$($("#content div").get($("#contenTab li").index(tab))).addClass("showContent"); 
},300); 
},function(){ 
clearTimeout(timeoutID); 
}); 
}); 
}); 