$(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");
});
});
【完整代码下载】
上一篇:网页中只渲染日期不显示时间的解决方法
下一篇:百度编辑器上传图片后出现图片属性焦点无法编辑下文的解决方法