$(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");
});

});

【完整代碼下載】

上一篇：網頁設計中如何讓ul下的多個li元素水平居中

下一篇：百度編輯器上傳圖片后出現圖片屬性焦點無法編輯下文的解決方法