• 技术文档
  • 专业的网站建设公司
  • 020-39182790

技术文档

您现在的位置:首页 > 服务支持 > 技术文档
简洁的选项卡联动-[mouseenter]
作者:织晶客服部 发布于:2022/3/11 14:09:02 点击量: 来源:织晶网络

$(function () {

A:当点击[移动端]/鼠标移入上部菜单选项卡时,设置内容列表区域

 1.监听选项卡的移入事件

$(".navc>li").mouseenter(function () {
 1.1修改被移入选项卡
$(this).addClass("current");
 1.2还原其它兄弟选项卡
$(this).siblings().removeClass("current");
 1.3获取当前移出选项卡的索引
var index = $(this).index();
 1.4根据索引找到对应的
var $li = $(".contentc>li").eq(index);
console.log(index);
 1.5 this下的操作
$li.addClass("contli_style").animate({"top": "-3px" , }, 300);
1.6 this下的操作siblings
$li.siblings().removeClass("contli_style").animate({"top": "0px" , }, 300);
});

B:当点击[移动端]/鼠标移入内容区域时,设置上部菜单选项卡
$(".contentc>li").mouseenter(function () {
$(this).addClass("contli_style").animate({"top": "-3px" , }, 300);
$(this).siblings().removeClass("contli_style").animate({"top": "0px" , }, 300);
var index = $(this).index();
var $navc_li = $(".navc>li").eq(index);
$navc_li.addClass("current");
$navc_li.siblings().removeClass("current");
});

});


【完整代码下载】



上一篇:网页中只渲染日期不显示时间的解决方法

下一篇:百度编辑器上传图片后出现图片属性焦点无法编辑下文的解决方法